How is the responsive layout designed?

1. How to solve the compatibility problem between different devices?

Media query in CSS3 can solve this problem.

2. What values can media query get?

Device width and Height device-width,device-heigth display screen/tactile device.

The width and height of the render window width,heigth display screen/haptic device.

The handheld direction of the device, transverse or vertical orientation (portrait|lanscape) and printer.

Screen ratio aspect-ratio dot matrix printer.

Device ratio device-aspect-ratio-dot matrix printer.

The object color or color list color,color-index the display screen.

Resolution of the device resolution

3. Grammatical structure and usage

Syntax: @media device name only (select condition) not (pick condition) and (device selection condition), device two {srules}

Usage:

A, example one: Use @media in Link:

<link rel= "stylesheet" type= "Text/css" media= "only screens and (max-width:480px), only screens and (max-device-width:48 0px) "href=" Link.css "rel=" external nofollow "/>

The above use only can be omitted, limited to the computer monitor, the first condition max-width refers to the maximum width of the rendering interface, the second condition max-device-width refers to the maximum width of the device.

b, inline @media in the style sheet:

Copy CodeThe code is as follows:
@media (min-device-width:1024px) and (max-width:989px), screen and (max-device-width:480px), (max-device-width:480px)
and (Orientation:landscape), (min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) { Srules}

Set the computer monitor resolution (width) greater than or equal to 1024px (and the maximum visible width of 989px), the screen width in 480px and the following handheld devices, screen width in 480px and horizontal (that is, 480 dimensions parallel to the ground) placed handheld devices;

The screen is large or equal to 480px less than 1024px and vertically placed on the device's CSS style.

How is the responsive layout designed?