Home  >  Article  >  Web Front-end  >  A brief discussion on html5 responsive layout

A brief discussion on html5 responsive layout

黄舟
黄舟Original
2017-05-26 10:03:341792browse

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn