This article has explained in detail the concept of responsive layout, the advantages and disadvantages of responsive layout, design concepts, and specific implementation code. It is a rare article. Here we recommend it to friends 1. What is responsive layout?
Responsive layout is a concept proposed by Ethan Marcotte in May 2010. In short, a website can be compatible with multiple terminals - rather than making a specific version for each terminal.
This concept was born to solve mobile Internet browsing. Responsive layout can provide users of different terminals with a more comfortable interface and a better user experience. Moreover, with the current popularization 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 innovations, but also some formed models.
2. What are the advantages and disadvantages of responsive layout? advantage:Strong flexibility in the face of different resolution devices
Can quickly solve multi-device display adaptation problems
shortcoming:Compatible with various equipment, high workload and low efficiency
The code is cumbersome, and the hidden and useless elements will appear, which will increase the loading time.
In fact, this is a compromise design solution, which cannot achieve the best results due to the influence of multiple factors.
To a certain extent, the original layout structure of the website will be changed, and user confusion will occur
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 media query get?
Device-width, device-heigth displays screen/tactile device.
Render the width and height of the window, hegth displays the screen/tactile device.
The handheld direction of the device, horizontal or vertical orientation (portrait|lanscape) and printer, etc.
Screen ratio aspect-ratio dot matrix printer, etc.
Device ratio device-aspect-ratio-dot matrix printer, etc.
Object color or color list color, color-index displays the screen.
Resolution of the device
3. Syntax structure and usage
Syntax: @media Device name only (select condition) not (select 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 in the above use can be omitted and limited to a computer monitor. 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 stylesheet:
Copy the code