A brief summary of response design in CSS programming

Now, responsive web design is undoubtedly very popular. For new people, responsive design may sound a bit complicated, but in fact, it's a lot simpler than you think. To help you get started with Quick response web design, I've written a quick start tutorial. I'm sure you can learn basic logic and media queries for responsive design in three steps (assuming you have basic CSS knowledge).

　　First step: Meta tags (see demo)

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

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

　　CSS Code copy content to clipboard

1. <!--[If Lt IE 9]>
2. <script src="Http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js" ></script>
3. <! [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, then the sidebar is 300px wide.

　Step Three: Media inquiries

CSS3 Media Query is a response-style trick that tells the browser how to render a page for a particular viewport width, as if it were a write if condition.

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

Then for viewport that are less than or equal to 700px, the #content and #sidebar are specified as automatic widths and the float is removed, so they can be displayed in full width.

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

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