Tuesday, 24 April 2012

Responsive web design example and source code

Anyway...  I recently posted a blog about a building a single page website which used media queries to change layout in real-time between a desktop & mobile format.  Click here to read it.

I few people have contacted me to ask if I would provide a link & source code for the page, so here it is:
Fyi - I've made a couple of changes in the last few days.

Adding a meta tag to enable viewport in mobile browsers
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Adding a condition to default the layout to desktop if the browser was IE8 or below
<!--[if lte IE 8]>
       <link rel="stylesheet" 
            href="browser-layout.css" 
            type="text/css" />
<![endif]-->

2 comments:

  1. Good example about coding for responsive website. thanks.

    ReplyDelete
  2. This article gives the light in which we can observe the reality. This is very nice one and gives indepth information. Thanks for this nice article. www.websepanta.com

    ReplyDelete