Responsive Design-Media Query_html/css_WEB-ITnose

Media query

Media query only supports IE9, chrome, ff and other browsers. Browsers below IE8 can download and quote respond.js,

is written as:

What attributes can be detected by media queries: 1.width Viewport width 2.height Viewport height 3.device-width rendering surface Width (for us, it is the width of the device screen) 4.device-height The height of the rendering surface (for us, it is the height of the device screen) 5.orientation Check whether the device is in landscape or portrait 6.aspect-ration is based on the aspect ratio of the viewport width and height A 16:9 ratio display can be defined like this: aspect-ration:16/9; 7.device-aspect-ration is based on the device The aspect ratio of the rendering plane 8.color The number of bits for each color For example, min-color:16 will check whether the device has 16-bit color 9.color-index The number of colors in the device color index table. The value must be a non-negative integer 10.monochrome checks the number of bits used per pixel in the monochrome frame buffer, the value must be a non-negative integer 11.resolution is used to detect the resolution of the screen or printer, for example: min -resolution:300dpi, You can also accept the measurement value of pixels per centimeter, for example, min-resolution:118dpcm; 12.scan TV scanning method progressive progressive scan interlace interlaced Scan For example: 720p HD TV (p means progressive scan) matches scan:progressive 1080i HD TV (i means interlaced scan) matches scan:interlace 13.grid is used to detect that the output device is a network device Or bitmap device

1-11 can have min- and max- to create a query range, but 12-13 does not have

Writing:

1. Determine whether to load the modified css based on the media attribute on the link

eg:

Orientation:portrait means the display is vertical, yes, load the css not at the beginning of the media query Adding it will reverse the logic of the query and is || , or 2. css file external link css file

@import url("phone .css") screen and (max-width:360px); /*Loaded when the maximum width of the display is less than 360px */ 3. Direct writing:

@media screen and (max-width:980px) { body{ background:#f0f; font-size:12px; } }