HTML5 practice-css3 media queries

ArticleDirectory

• Css3 media queries
• Media queries for Internet Explorer
• Sample Site
• Summary

Reprinted with the original address:Http://www.cnblogs.com/softlover/archive/2012/11/25/2787429.html

Demo view Address: http://www.webdesignerwall.com/demo/media-queries/

Css2 allows youSpecify a style for the media type, for example, for a screen or printer. Css3 provides more powerfulMedia queries, you can set expressions for different media types and different styles according to different conditions. For example, you can set a style for a large screen and another style for mobile. This feature is quite powerful. You can provide different style effects for different devices without modifying the page content. The following courses will introduce some sites that use this technology.

 

 

Css3 media queries

Open the my demo page, adjust the browser size, and view the page layout changes.

Max width

When the page view area is smaller than PX width, CSS will be used.

@ Media screen and (max-width: 600px){. Class {background:# Ccc;}}
 

You can also use the following method to reference an external CSS file in

 
<LinkREL= "Stylesheet"Media= "Screen and (max-width: 600px )"Href= "Small.css" />
 

Min width

When the view area is greater than PX width, CSS is used.

@ Media screen and (min-width: 900px){. Class {background:#666;}}
 

Multiple media queries

You can combine multiple media queries. When the view area width is between 600px and 900px, the following CSS is used.

 
@ Media screen and (min-width: 600px) and (max-width: 900px){. Class {background:#333;}}
 

Device width

The following CSS willMax-device-width is PX, for example, iPhone.

Note: Max-device-width indicates the actual resolution of the device,Max-width indicates the area size.

@ Media screen and (max-device-width: 480px){. Class {background:#000;}}
 

For iPhone 4

The following is the CSS for iPhone 4.

 
<LinkREL= "Stylesheet"Media= "Only screen and (-WebKit-Min-device-pixel-ratio: 2 )"Type= "Text/CSS"Href= "Iphone4.css" />
 

For iPad

You can also check the location on the iPad (Portrait or landscapse).

 
<LinkREL= "Stylesheet"Media= "All and (orientation: Portrait )"Href= "Portrait.css"> <LinkREL= "Stylesheet"Media= "All and (orientation: Landscape )"Href= "Landscape.css">
 

Media queries for Internet Explorer

Because IE8 and earlier versions of iebrowser do not support media query, you need to use JavaScript hack to solve the problem. The following are some solutions:

• CSS tricks-use jquery to determine the browser size
• The man in blue-using JavaScript (this article was written six years ago)
• Jquery media queries plugin

Sample Site

You can use a browser that supports media query to access the following sites, for example:Firefox, chrome, and safari. You can view their layout response to the browser width.

Hicksdesign

• Large Size:Three columns of Sidebar
• Small Size:Two columns of Sidebar (the middle sidebar is on the left)
• Smaller size:One column of Sidebar (the rightmost column is under the logo)
• Minimum Size:No sidebar (move up the logo and sidebar on the right, move down the other sidebar)

 

Colly

The page layout switches between 1, 2, and 4 columns Based on the visible area of the browser.

A list apart

Large Size:Navigation in the upper part, 1 line of Image

Medium Size:Navigation on the left, 3 images

Small Size:Navigation on the top, no background image for the logo, 3 images

Tee Gallery

He and his previousColly is a bit like it. The difference is that its images are scaled according to the changes in the page layout. The trick here is to use the percentage width of the image instead of the fixed width, for example:Width = 100%.

Summary

We need to note that making a CSS for mobile does not mean that our website is optimized for mobile devices. Optimize mobile devices, website images, and HTMLCodeYou also need to reduce the size to facilitate loading. Media query only implements design presentation, rather than optimization operations.

 

Address: http://webdesignerwall.com/tutorials/css3-media-queries

 

HTML5 practice series