@ Media

Structure:

@ MediaAll and (min-width: 600px ){

Style Sheet: that is

. Mainbox {Background: # fff000 ;}

}

Value that can be specified for all:

Style sheet:

Use the and keyword to specify the style used when the value of a certain feature of a device type meets a certain condition. For example, the following statement specifies the style used when the window width is smaller than 640px:
@ Media screen and (max-width: 639px) {style code}
You can use multiple statements to apply the same style to different device types and features. The specified method type is as follows:
@ Media handled and (min-width: 360px), screen and (min-width: 480px) {style code}
You can add the not keyword or only keyword to the expression. The not keyword indicates that the reverse operation is performed on the following expression. The writing method is as follows:

@ Media not handled and (color) {style code}
// The style code will be used on all non-color Devices
@ Media all and (not color)
The only keyword is used to hide styles in expressions in browsers of devices that do not support media queries but can read media types. For example, for the following statement:
@ Media only screen and (color) {style code}
For devices that support media queries, the correct style will be applied, as if only does not exist. For devices that do not support media queries to read the media type (for example, IE8 only supports "@ media screen"), this style is ignored because only instead of screen is read first.
Media queries browsing is not supported, regardless of whether the style is only or not.
The media queries module in css3 also supports reference to external style sheets. The usage is similar to the following:
@ Import url(color.css) screen and (min-width: 1000px)