Responsive Design Trilogy

Original: Responsive Design in 3 Steps

Three steps to a responsive design

Translator: Dwqs

Now, responsive web design is undoubtedly very popular. If you're not familiar with responsive design, take a look at the responsive sites I've published earlier on. For newcomers, responsive design may sound a little complicated, but in fact, it's much simpler than you think. To help you get started with responsive web design, I've written a quick start tutorial. I guarantee you can learn the basic logic of responsive design and media query (if you have basic CSS knowledge) in three steps.

The first step: Meta tags (see Demo )

Most mobile browsers will scale the HTML page to a wide width of viewport so that the content will be displayed correctly on the screen. You can use the viewport meta tag to reset this behavior. The viewport tag below tells the browser to use the device width (device-width) as the width of the viewport, and disables the initial zoom ratio. Add this meta tag to

< Meta  name= "Viewport"content= "Width=device-width, initial-scale=1.0"> 

IE 8 and earlier versions do not support media queries, and you can use Media-queries.js or respond.js to increase the support of IE for media queries.

<!--[if Lt IE 9]>      <script src= "Http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js" >< /script><![ Endif]->

  Step Two: HTML structure

In this example, I have a basic page layout consisting of a header, a content container, a sidebar, and a bottom. The head has a fixed 180px height, the content container is 600px wide, and then the sidebar is 300px wide.

Step Three: Media enquiry

CSS3 Media Query is a responsive design trick that tells the browser how to render a page for a particular viewport width, just as if it were written.

The following rules are designed for viewport widths less than or equal to 980px. Basically, I changed the width of all the containers from pixel values to percent values so that the container becomes liquid (fluid).

Then for viewport with widths less than or equal to 700px, specify #content and #sidebar as automatic widths, and remove floats so they can be displayed at full width.

For a width less than or equal to 480px (mobile device screen), the height of the reset #header is auto, the font size of the H1 is modified to 24px, and the #sidebar is hidden.

You can write as many media queries as you want. I only showed three media queries in the demo. The purpose of the media query is to get a different layout for the specified viewport width by applying different CSS rules. Media queries can be in the same style sheet or in a separate file.

Summarize

The intent of this tutorial is to show you the basic responsive design, and if you want to know more about it, take a look at my previous article: Responsive design with Media Queries.

 

Original starting: http://www.ido321.com/1395.html

Responsive Design Trilogy