A brief discussion on html5 responsive layout

1. What is responsive layout?

Responsive layout is a concept proposed by Ethan Marcotte in May 2010. In short, it means that a website can be compatible with multiple terminals - rather than making one for each terminal. specific version.

This concept was born to solve mobile Internet browsing. Responsive layout can provide a more comfortable interface and better user experience for users on different terminals. With the current popularity of large-screen mobile devices, it is not an exaggeration to describe it as a general trend.

As more and more designers adopt this technology, we not only see a lot of innovation, but also see some forming patterns.

2. What are the advantages and disadvantages of responsive layout?

Advantages:

Strong flexibility when facing devices with different resolutions
Can quickly solve the problem of multi-device display adaptation
Disadvantages:

Compatible with various devices, heavy workload, Low efficiency
The code is cumbersome, hidden useless elements will appear, and the loading time will be lengthened
In fact, this is a compromise design solution that is affected by many factors and cannot achieve the best results
It has changed the original design of the website to a certain extent The layout structure may cause user confusion

3. How to design a responsive layout?

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

Media Query in CSS3 can solve this problem.

2. What values ​​can be obtained by media query?

The width and height of the device device-width, device-heigth display screen/tactile device.

Render window width and height width,heigth display screen/haptic device.

The hand-holding direction of the device, horizontal or vertical orientation (portrait|lanscape) and printer, etc.

Aspect-ratio dot matrix printer, etc.

Device-aspect-ratio-dot matrix printer, etc.

Object color or color list color, color-index display screen.

Device resolution

3. Grammar structure and usage

Grammar: @media device name only (selection condition) not (selection condition) and (device selection condition), device two {sRules}

usage:

a. Example 1: Use @media in link:

<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px),only screen and (max-device-width: 480px)" href="link.css" rel="external nofollow" />

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

b. Embed @media in the style sheet:

[Related recommendations]

1. HTML5 mobile application development - detailed introduction to the role of viewport (pictures and texts)

2. WeChat applet View: flex Layout example

3. HTML5 programming

4. An example tutorial of small program development using co to handle asynchronous processes