CSS2 allows you to style specific media types, such as screens or printers. CSS3 provides more powerful media queries. You can set expression for different media types and set different styles according to different conditions. For example, you can set one style for large screens and another style for mobile. This function is quite powerful. You can provide different style effects for different devices without modifying the page content. In the following lessons we will introduce some sites that use this technology.
Open my demo page, adjust the browser size, and check the page layout changes.
When the page view area is less than 600px wide, css will be used.
@media screen and (max-width: 600px) { .class { background: #ccc; }}
You can also use the following method to reference external css files in the
of the page.<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
When the view area is larger than 900px width, css will be used.
@media screen and (min-width: 900px) { .class { background: #666; }}
You can combine multiple media queries together. When the width of the view area is between 600px and 900px, the following will be used css.
@media screen and (min-width: 600px) and (max-width: 900px) { .class { background: #333; }}
The following css will be used when max-device-width is 480px, such as iPhone.
Note: max-device-width refers to the actual resolution of the device, and max-width refers to the area size.
@media screen and (max-device-width: 480px) { .class { background: #000; }}
The following is the css for iphone4.
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />
You can also check the positioning (portrait or landscapse) on iPad.
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
Because IE8 and previous versions of IE browsers do not support media queries, you need to use JavaScript hacks to solve the problem. Here are some solutions:
CSS Tricks - Using jquery to determine browser size
The Man in Blue - Using Javascript ( This article was written six years ago)
jQuery Media Queries plugin
You The following sites can be accessed using browsers that support media query, such as Firefox, Chrome, and Safari. You can see how their layout responds to the browser width.
##Large size: 3 column sidebar
Small size: 2 columns of sidebars (the middle sidebar runs to the left)
Smaller size: 1 column of sidebars (the rightmost one runs below the logo)
Minimum size: No sidebar (logo and sidebar on the right move up, other sidebars move down)
visual area of the browser.
A List ApartLarge size:Navigation at the top, 1 line of pictures
Medium size: Navigation on the left, 3 columns of images
Small size: Navigation on the top, logo without background image, 3 columns of images
Tee Gallery It is a bit similar to the previous Colly. The difference is that its pictures will be scaled according to changes in the page layout. The trick used here is to use a percentage width for the image instead of a fixed width, for example: width=100%. Summary We need to note that making a CSS for mobile does not mean that our site is optimized for mobile devices. To optimize mobile devices, website images and html code also need to be reduced in size to facilitate loading. What media query does is only design presentation, not optimization operation.
The above is the detailed content of HTML5 practice-CSS3 Media Queries detailed introduction. For more information, please follow other related articles on the PHP Chinese website!