CSS 3 media queries for responsive Web Design

Start to study responsive web design. css3 media queries is an entry.

Media queries allows you to add expressions to determine the media environment and apply different style sheets. In other words, it allows us to change the page layout without changing the content to precisely adapt to different devices.

How does media queries work?

Either way, you can determine the device size directly in the link and then reference different CSS files:

 
<LinkREL= "Stylesheet"Type= "Text/CSS"Href= "Stylea.css"Media= "Screen and (min-width: 400px)">
 

When the screen width is greater than or equal to px, stylea.css is used.

In Media attributes:

• ScreenIs one of the media types. css2.1 defines 10 media types.
• AndIt is called a keyword. Other keywords includeNot(Exclude a device ),Only(Specify a device)
• (Min-width: 400px)Is the media feature, which is placed in a pair of parentheses. For complete features, see media features.

 
<LinkREL= "Stylesheet"Type= "Text/CSS"Href= "Styleb.css"Media= "Screen and (min-width: 600px) and (max-width: 800px )">
 

When the screen width is greater than or less, styleb.css is applied.

Other properties can be viewed here: http://www.swordair.com/blog/2010/08/431/

Another method is to directly write it in the <style> label:

 
@ Media screen and (max-width: 600px){/* Apply the following CSS style when the screen size is smaller than 600px */. Class {background:# Ccc;}}
 

The method is to add @ media, and the other attributes are the same as those in the link.

In fact, it is basically style overwrite ~, Determine the device, and then reference different style files to overwrite.

Note that because the webpage will adjust the layout according to the screen width, you cannot use an absolute width layout or an element with an absolute width. This is very important; otherwise, a horizontal scroll bar will appear.

-------------------------------- Gorgeous split line -----------------------------------------------------------

The following is a demo

For a three-column layout, it is changed to two columns under different sizes, and then to one column ~

Code:

<! Doctype HTML> 
 
 

 
ReferenceArticle: Http://www.swordair.com/blog/2010/08/431/
 

 
Http://www.zhangxinxu.com/wordpress/2011/08/css3-media-queries%E7%9A%84%E4%BA%9B%E9%87%8E%E5%8F%B2%E5%A4%96%E4%BC%A0/
 

 
Http://webdesignerwall.com/tutorials/css3-media-queries
 

 
Http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html