Responsive design trilogy, responding to Trilogy

Responsive design trilogy, responding to Trilogy

Original article: Responsive Design in 3 Steps

3 steps of responsive design

Translator: dwqs

Now, responsive Web design is undoubtedly very popular. If you are not familiar with responsive design, you can refer to the responsive sites I have posted earlier. For newcomers, responsive design may sound a little complicated, but in fact it is much simpler than you think. To help you get started with responsive Web design, I wrote a quick start tutorial. I promise that you can learn the basic logic of responsive design and media query in three steps (assuming you have basic CSS knowledge ).

Step 1: Meta tag (seeDemo)

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 use the meta tag viewport to reset this behavior. The following viewport label tells the browser to use device-width as the width of the viewport and disable the initial scaling 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, you can use media-queries.js or respond. js to increase IE support for media queries.

<!--[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 media query is a responsive design trick. It tells the browser how to render a page with a specific viewport width like if conditions.

The following rules are designed for the view width 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 viewport whose width is less than or equal to 700px, specify # content and # sidebar as the automatic width and remove the float, so they can be displayed in full width.

If the width is less than or equal to PX (mobile device screen), reset # the header height to auto, modify the h1 font size to 24px, and hide # 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

The intent of this tutorial is to show you the basic Responsive Design. For more information, see my previous article: Responsive Design With Media Queries.

 

First: http://www.ido321.com/1395.html