Responsive design: Media queries

Media queries allow us to set CSS styles based on the features displayed by the device. You can specify the display effect for certain output sets without changing the content of the page.

First, the media query syntax

1. <link> Tags: Specify the device type for the style sheet via the link tag's media property, for example:

The following code indicates that the media type is a display and media features are vertically placed on the display, when the Cssy style is introduced

<rel= "stylesheet"  type= "Text/css"  media= " Screen and (orientation:portrait) "  href=" Screen-style.css ">

Further, you can also write a list of media queries. If any one of the queries in the query list is true, the file is loaded. All queries are not true, they are not loaded. Here's an example: a CSS style is introduced only if the display is vertically positioned and the viewport is larger than 800px or a projector.

<rel= "stylesheet"  media= "screen and (orientation:portrait) and ( min-width:800px), projection "  href=" 800wide-portrait-screen.css "/>

Note: (1) Use commas to separate media queries

(2) After projection, there is no and and no combination of attributes/values. No subsequent expression means that the condition is satisfied as long as it is projection. In this example, the style is applied to all projectors.

2. Use media queries in CSS style sheets: For example, insert the following code into a style sheet, and on the screen width of the =400px device, the H1 element text will turn green ( best way )

{h1 {color:green} }

3, using the CSS @import directive: In the current style sheet by the criteria to introduce other style sheets; For example, the code below will load a style sheet named Phone.css for a display with a maximum width of 360px for a viewport

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

Note: Using the @import method increases the HTTP request (which can affect the load speed) and should be used with caution.

Second, the media query can detect which features

Width/height: The viewport width is high;

Device-width/height: The width and height of the device screen;

Orientation: Check whether the equipment is in horizontal or vertical;

Device-aspect-ratio/aspect-ratio: Based on the device/viewport width to height ratio;

Color: The number of bits per color. For example, MIN-COLOR:16 will detect whether the device has 16-bit color;

Color-index: The number of colors in the Color index table of the device. The value must be a non-negative integer.

　　Monochrome: Detects the number of bits used per pixel in a monochrome frame buffer. The value must be a non-negative integer, such as Monochrome:2.

　　Resolution: Used to detect the resolution of a screen or printer, such as min-resolution:300dpi. You can also accept measurements of pixel points per centimeter, such as MIN-RESOLUTION:118DPCM.

　　Scan: The way the TV is scanned, the value can be set to progressive (progressive scan) or interlace (interlaced scanning)

　　Grid: Used to detect whether the output device is a grid device or a bitmap device.

Third, using media inquiries to transform our design

CSS cascading style sheets, that is, the styles later in the style sheet override the previous same style (except for higher precedence), so you can rewrite the corresponding section with media queries

Iv. prevent the mobile browser from automatically resizing pages

Both IOS and Android browsers are based on the WebKit (http://www.webkit.org/) core. Both browsers, as well as many other browsers, such as opera Mobile, support overriding the default canvas zoom settings with the viewport meta element. Insert <meta> tags in the

<name= "Viewport"  content= "Initial-scale=2.0,width=device width"  />

In general, we need to set the zoom ratio to 1.0, indicating that the browser renders the page according to the actual size of the viewport, while setting the width to device width indicates that the browser renders the page according to the actual size of the device, as follows

<name= "Viewport"  content= "width=device-width,initial=scale=1.0"  />

V. Summary

Media queries can only provide us with adaptive design effects, not full response. Allows our design to display the flow layout between breakpoints in media query settings.

Responsive design: Media queries