Example code for using @media in CSS3 to achieve web page adaptation

Nowadays, the screen resolution of computer monitors is developing towards higher and higher, but the resolution of mobile device terminals such as mobile phones cannot be that much higher. More and more websites are starting to adapt their pages to various resolutions, displaying basic content at small resolutions, full functions at large resolutions, and even multiple versions at multiple levels.

1. @media in CSS2

Although CSS2 supports the @media attribute, it can only implement a few functions and is generally only used to define special CSS for printing.

@media sMedia { sRules }

1.1 Examples

// Set the font size for the display @media screen {
BODY {font-size:12pt; }
}
// Set the font size for the printer @media print {
@import "print.css"
BODY {font-size:8pt;}
}

2. @media in CSS3

The @media attribute has evolved into a kind of media queries in CSS3. In CSS3, query statements can be used to match various types of screens.

grammar:

@media mediatype and|not|only (media feature) {
CSS-sRules;
}

1. mediatype media type: all, print (printer), screen (computer screen, mobile phone, etc.), speech (screen reader and other devices)
2. media_query and | not | only media query condition operation
3. media_feature Media features, such as maximum and minimum width.

Determine the media (object) type to achieve different displays. This feature allows CSS to act more precisely on different media types.

2.1 Examples

body{background:blue;}/*width between 500px-800px + height between 100px-400px blue*/
@media screen and (max-width:500px){body{background:green;}}/*Green when width is less than 500px*/
@media screen and (min-width:800px){body{background:red;}}/*Red when width is greater than 800px*/
@media screen and (max-height:100px){body{background:yellow;}}/*Yellow when height is less than 100px*/
@media screen and (min-height:400px){body{background:pink;}}/*Pink when height is greater than 400px*/

2.2 Media Characteristics

Summarize

This concludes this article about using @media in CSS3 to achieve web page adaptation. For more relevant css3 media web page adaptation content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!