Three-Step Response web design

Three-Step Response web design

Responsive web design is a very fashionable technology. If you are still not familiar with responsive design, check out the list of responsive sites I have previously published. For beginners, responsive design may sound a little complicated, but it is actually easier than you think. To help you quickly get started with responsive design, I wrote a quick getting started tutorial. I promise you can learn the basic logic of responsive design and media query in three steps.) Suppose you have basic CSS knowledge ).

Step 1: view the demo with the Meta tag)

Most mobile browsers scale the HTML page to a wider viewport width, so that the content can be correctly displayed on the screen. You can useviewportThis meta tag is used to reset this behavior. The following viewport label tells the browser to use the device width device-width) as the viewport width and disable the initial scaling ratio. InAdd this meta tag.

 
  

  
   
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
  

Internet Explorer 8 or an older browser does not support media queries. You can use media-queries.js or respond. js to add support for media queries in IE.

 
  

  
   
<!--[if lt IE 9]> 
  
   
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
  
   
<![endif]--> 
 
  

Step 2: HTML Structure

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

Step 3: Media Query)

CSS3 is a responsive design trick. It is similar to the if condition to tell the browser how to render the page for a specific viewport width.

The following rule set takes effect when the viewport width is less than or equal to 980px. Basically, I changed the width of all containers from the pixel value to the percentage value, so that the container will become fluid ).

Then, for the viewport whose width is less than or equal to 700px, specify#contentAnd#sidebarAuto-width and float are removed, so they can be displayed in full width.

For mobile device screens whose width is less than or equal to PX), reset#headerThe height isauto, Modifyh1The font size is 24px and hidden#sidebar.

You can write as much media queries as you want. In the demo, only three media queries are displayed. The purpose of media query is to apply different CSS rules to the specified viewport width to obtain different la S. Media queries can be performed in the same style sheet or in a single file.

Summary

This tutorial will show you the basic knowledge of the response design. If you want to see more in-depth tutorials, see my previous tutorial: responsive design using media queries.

Author: JeremyWei | reprinted, but the original source and author information and copyright statement of the article must be indicated in hyperlink form

Web: http://weizhifeng.net/responsive-design-in-3-steps.html