HTML-HTML5+CSS3 authoritative Guide Reading (Iv. media Enquiry)

1. Media type

HTML 4 and CSS 2 currently support the creation of proprietary stylesheets for different media types, such as the use of sans serif fonts when a page is displayed on the screen, and the use of serif fonts when printing, and screen and print as two defined media types. The media query makes the style sheet more specific and expands the function of the media type;

2. Media Feature Detection
Media queries consist of a media type and one or more conditional expressions that detect media characteristics, which can be used to detect media features such as width,height , and color(etc.) in media queries, using media queries, You can customize the display for certain output devices without changing the content of the page; The main commonly used is width, device-width;

Width: Viewport width height: viewport height device-width: The width of the rendered surface (for us, the width of the device screen) Device-height: The height of the rendered surface (for us, the height of the device screen) Orientation: Check whether the device is in landscape or portrait Aspect-ratio: Based on the width and height ratio of viewport widths and heights, a 16:9 scale display can be defined like this aspect-ratio:16/9device-aspect-ratio: like Aspect-ratio, Aspect ratio color based on device render plane width and height: the number of bits per color, for example, MIN-COLOR:16 detects whether the device has a 16-bit color Color-index: The number of colors in the device's Color index table, and the value must be a non-negative integer monochrome: Detects the number of bits used per pixel in a monochrome frame buffer, and the value must be a non-negative integer, such as monochrome:2resolution: used to detect the resolution of the screen or printer, such as min-resolution:300dpi, and to accept a measure of pixel points per centimeter, such as Min-resolution:118dpcmscan: The way the TV is scanned, the value can be set to progressive (progressive scan) or interlace (interlaced scanning), such as 720p HD TV (720p p that indicates progressive scanning) matching scan: Progressive, while the 1080i HD TV (I in 1080i indicates an interlaced scan) matches Scan:interlacegrid: used to detect whether the output device is a grid device or a bitmap device

In all of the above features, you can use the Min and Max prefixes to create a query range in addition to scan and grid

3. Three ways to use media queries

1). Using the CSS File reference

Are you a vertical (orientation:portrait) display (screen) ? If yes, load the specified CSS file

<link rel= "stylesheet" media= "screen and (orientation:portrait)" href= "Portrait-screen.css"/>

Limit display Devices (screen) that have a viewport width greater than 800 pixels (min-width:800px) to load the CSS file

Limit only Display Devices (screen)} or projectors (projection) with a viewport width greater than 800 pixels (min-width:800px) Can load the CSS file

2). Use in CSS style sheets

If the display is displayed (screen) and the resolution is less than or equal to 400px (max-device-width:400px) , the color of the H1 is green, Note that the Device-width is the device display width and width of the viewport

{     h1 {color: green;}  }

3). When other style sheets are introduced in the style sheet

Pour the phone.css file if it is a display (screen) and the resolution is less than or equal to 400px (max-width:360px)

@import url ("phone.css") screen and (max-width:360px);

PS: This method will increase the HTTP request, with caution

　　 Respond.js (Https://github.com/scottjehl/Respond) is the fastest JavaScript tool for increasing media query support for Internet Explorer 8 and earlier. But it is currently unable to parse the CSS @import command

A

HTML-HTML5+CSS3 authoritative Guide Reading (Iv. media Enquiry)