HTML5 practice-CSS3 Media Queries detailed introduction

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.

CSS3 Media Queries

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

Max Width

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" />

　Min Width

When the view area is larger than 900px width, css will be used.

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

　Multiple Media Queries

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;
  }}

　Device Width

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;
  }}

　For iPhone 4

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" />

　For iPad

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">

Media Queries for Internet Explorer

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

Sample site

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.

Hicksdesign

• ##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)

#　Colly

The page layout switches between 1 column, 2 columns and 4 columns according to the

visual area of the browser.

　A List Apart

Large 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!