Responsive design-media Query

Media Query

Media query only supports ie9 +, chrome, ff, and other browsers. Browsers under IE8 can download and reference respond. js,

Statement:

<! -- [If lt ie 9]>
<SCRIPT src = "respond. js"> </SCRIPT>
<! [Endif] -->

Attributes that can be detected by media queries:
1. Width: width
2. Height
3. device-width: Specifies the surface width (for us, the screen width of the device)
4. device-Height: rendering the surface height (for us, the screen height of the device)
5. Orientation check whether the device is in the horizontal or vertical direction
6. aspect-ration is based on the aspect ratio of the viewers' width and height.
A ratio display can be defined as aspect-ration: 16/9;
7. device-aspect-Ration Based on the aspect ratio of the device rendering plane
8. The number of BITs in each color, for example, Min-color: 16, checks whether the device has a 16-bit color.
9. Number of colors in the color-index device color index table. The value must be a non-negative integer.
10. monochrome checks the number of digits used by each pixel in the monochrome frame buffer. The value must be a non-negative integer.
11. Resolution is used to detect the screen or printer resolution, for example, Min-resolution: 300 dpi,
It can also accept the measurement value of pixel points per centimeter, for example, Min-resolution: 118 DPCM;
12. Scan the TV set
Progressive row-by-row Scan
Interlace Line Scan
For example, a 720 p hd TV (P indicates a row-by-row scan) matches scan: progressive.
1080i hd TV (I indicates interlace scan) matching scan: interlace
13. The grid is used to check whether the output device is a network device or a bitmap device.

1-11 can have Min-And Max-to create a query range, while 12-13 does not

Statement:

1. Check whether the media attribute on the link is loaded and changed to CSS.

Eg:<LINK rel = "stylesheet" type = "text/CSS" Media = "screen and orientation: Portrait" href = "CSS/__style.css"/>

Orientation: Portrait means that the display is vertical, yes, loading and changing CSS
Not at the beginning of a media query. The query logic is reversed.
And is and |
, Or
　　2. CSS file external link CSS file

@ Import URL ("phone.css") screen and (max-width: 360px);/* load when the maximum screen width is less than 360px */
3. Direct Writing:

@ Media screen and (max-width: 980px ){
Body {
Background: # f0f;
Font-size: 12px;
}
}

 

Responsive design-media Query