Responsive design trilogy_html/css_WEB-ITnose

Translation: Three steps of responsive design

Translator: dwqs

Nowadays, responsive web design is undoubtedly very popular. If you are not familiar with responsive design, you can check out the responsive sites I have published before. For newcomers, responsive design may sound a bit complicated, but in fact, it's much simpler than you think. To help you get started quickly with responsive web design, I wrote a quick start tutorial. I guarantee that you can learn the basic logic and media query of responsive design in three steps (assuming you have basic CSS knowledge).

Step one: Meta tag (see demo)

Most mobile browsers will scale the HTML page into a wider viewport width so that the content can 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 device-width as the width of the viewport and disable initial scaling. Add this meta tag to 93f0f5c25f18dab9d176bd4f6de5d30e.

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's support for media queries.

    <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 header , content containers, sidebars, and a bottom constitute the basic page layout. The header has a fixed height of 180px, the content container is 600px wide, and the sidebar is 300px wide.

Step 3: Media query

CSS3 media query is a trick for responsive design. It is similar to writing The if condition is the same, telling the browser how to render the page for a specific viewport width.

The following rules are designed for viewport widths less than or equal to 980px. Basically, I changed the width of all containers from pixel values ​​to percentage values ​​so that the containers become fluid.

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

For widths less than or equal to 480px (mobile device screen), reset the height of #header to auto, modify the font size of h1 to 24px, and hide the #sidebar.

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

Summary

The purpose of this tutorial is to show you basic responsive design. If you want to learn more about it, you can check out my previous article: Responsive Design With Media Queries.