Css @ media

Css @ media
@ Media of css2

Although the @ media attribute is supported in css2, few functions can be implemented. CSS is defined only when printing is used.
Syntax: @ media sMedia {sRules}
Note:
SMedia: Specify the device name. See Appendix: Device Type
SRules: style sheet Definition
Specify a style sheet rule for the specified device type. See media attributes (features) of link objects ).
Example:

123456789

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

@ Media of css3

@ Media attributes have evolved into a media queries (media query/match) in CSS3. In CSS3, you can use query statements to match various types of screens.
Syntax: @ media: {sRules}
Valid value:

12	: Specify the device name. {SRules}: style sheet definition.

Note:
Determine the media (object) type to achieve different display. This feature allows CSS to act more accurately on different media types, different conditions of the same media (resolution, color number, etc ).

01020304050607080910111213

media_query: [only | not]? [ and ]*expression: ( [: ]? )media_type: all| aural| braille| handheld| print| projection| screen| tty| tv| embossedmedia_feature: width | min-width | max-width| height | min-height | max-height| device-width | min-device-width | max-device-width| device-height | min-device-height | max-device-height| device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio| color | min-color | max-color| color-index | min-color-index | max-color-index| monochrome | min-monochrome | max-monochrome| resolution | min-resolution | max-resolution| scan | grid

Analysis
Media_query: Media query condition. Including the only not and logical judgments that often appear in the program.
Expression: Expression. Whether the media features match or not.
Media_type: Media type. Including a lot.
Media_feature: Media features. It is often used to determine the min-width max-width min-max-width.

DEMO (it is recommended to open it in Chrome or FIREFOX. After it is opened, press the shortcut key "CTRL" + "+", "CTRL" + "-" to zoom in the page ):

CSS code

12345

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

HTML code

123456

<p> Effect demonstration: reduce or expand the browser window size and pay attention to the changes in the background color. The logic is as follows: p><p>/* Blue between 500px-800px width and 100px-400px height */ p><p>/* Green when the width is less than 500px */ p><p>/* Red when the width is greater than 800px */ p><p>/* Yellow when the height is less than PX */ p><p>/* Pink when the height is greater than 400px */ p>