Responsive web& Media queries

Why do responsive designs require media queries?

The media features available for detection in media queries are width, height, and color (and so on). With media queries, you can customize the display for certain output devices without changing the content of the page.

To use media query steps:

1. In the head, introduce the following META tag:

<name= "Viewport"  content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, User-scalable=no ">

Width = device-width: widths equal to the width of the current device

Initial-scale: initial zoom ratio (default = 1.0)

Minimum-scale: The minimum scale to allow the user to zoom (the default setting is 1.0)

Maximum-scale: maximum scale allowed to be scaled by the user (default = 1.0)

user-scalable: Whether the user can zoom manually (the default is no, because we don't want the user to zoom out of the page)

2. You can use media in CSS

@media screen and (min-width:960px) and (max-width:1200px) {    body{        background:yellow;    } }

Indicates that the background color of the body is yellow when the screen width is greater than 960px and less than 1200px.

3, media all parameters

Width : The viewable width of the browser.

Height: The viewable height of the browser.

device-width: The width of the device screen.

device-height: The height of the device screen.

Orientation: The test equipment is currently in the horizontal or vertical state.

aspect-ratio: Detects the scale of the browser's visible width and height. (Example: ASPECT-RATIO:16/9)

device-aspect-ratio: Detects the ratio of the width and height of the device.

Color: detects the number of digits of the color. (ex: MIN-COLOR:32 will detect if the device has 32-bit color)

color-index: Check the color in the Device Color Index table, his value cannot be negative.

Monochrome: detects the number of bits per pixel in a monochrome ligustrum buffer area. (This is too high, I guess I seldom use it.)

Resolution: Detects the resolution of the screen or printer. (For example: min-resolution:300dpi or MIN-RESOLUTION:118DPCM).

Grid: Whether the device that detects the output is a grid or a bitmap device.

4. Precautions

Responsive design requires the use of percentages and EM, REM, without PX.

EM: Refers to the font-size of the context (parent element)

REM: Refers to the body of the Font-size

Percentages and Max-width, min-width with:

#wrapper {  width:96%;   max-width:1200px;}

When the width of an element is used as a percentage, and you do not want it to exceed a pixel value.

Responsive web& Media queries