[Transfer] CSS3 Media Query implements responsive layout_html/css_WEB-ITnose

Speaking of responsive layout, I believe everyone has a certain understanding. Responsive layout is a very popular design concept this year. With the popularity of mobile Internet, in order to solve the problem Nowadays, with various browser resolutions and display effects of different mobile devices, designers have proposed responsive layout design solutions. Today I will talk to you about the small matter of responsive layout, including what is responsive layout, the advantages and disadvantages of responsive layout, and how to design responsive layout (responsive layout is implemented through CSS3 Media Query).

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 instead of making a specific layout for each terminal. 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 some established patterns.

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

Advantages:

Strong flexibility in facing devices with different resolutions

Can quickly solve the problem of multi-device display adaptation

Disadvantages:

Compatible with various devices, heavy workload, low efficiency

Cumbersome code, hidden useless elements, and prolonged loading time

In fact, this is a compromise design solution, which is affected by many factors and cannot achieve the best results

It changes the original layout structure of the website to a certain extent, which may cause user confusion

3. How to design responsive layout?

We have learned above what responsive layout is, so how should we design it in our actual projects? In the past, when we designed websites, we were troubled by the compatibility of different browsers. Now we have to use devices of different sizes. How should we calm down? If there is a demand, there will be a solution. Haha, when it comes to responsive layout, we have to mention Media Query in CSS3. This is a good thing, easy to use, powerful, and fast... Media Query is a tool for making responsive layouts. A powerful tool for layout. Using this tool, we can create a variety of rich and practical interfaces very conveniently and quickly. Next, let’s learn more about Media Query.

1. What is Media Query in CSS?

Define stylesheet rules with different media types and conditions. Media queries allow CSS to more accurately act on different media types and different conditions on the same media. Most media properties of media queries accept min and max for expressing "greater than or equal to" and "less than or equal to". For example: width will have min-width and max-width. Media queries can be used in @media and @import rules in CSS, and can also be used in HTML and XML. Through this label attribute, we can easily implement rich interfaces on different devices, especially mobile devices, which will be more widely used.

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

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

The width and height of the rendering window width,heigth for display screen/haptic devices.

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.

The resolution of the device.

3. Syntax structure and usage

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

Example 1: Use @media in link:

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. The second condition max-device-width refers to the maximum width of the device.

Example 2: Embed @media in the style sheet:

@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}

In Example 2, the computer monitor resolution (width) is set to be greater than or equal to 1024px (and the maximum visible width is 989px); the screen width is 480px and below for handheld devices; the screen width is 480px and horizontal ( That is, a handheld device with a size of 480 (parallel to the ground); a screen width greater than or equal to 480px but less than 1024px and a css style for a device placed vertically.

As can be seen from the above example, characters are connected by spaces, the selection conditions are included in parentheses, and srules is a style sheet for compatible settings, included in square brackets. Only (limit a certain device, can be omitted), and (logical AND), not (exclude a certain device) are logical keywords, and multiple devices are separated by commas. This inherits the basic syntax of CSS.

4. Available device name parameters:

5. Logical keywords:

6. Available device name parameters:

7. Test Media Queries

Finally, we need to test the Media Queries we just designed and want to test on different devices For the effect of Media Queries, you can use a browsing tool to check the display effect on screens of different sizes. Here is a good online tool? Responsivator, which can simulate various devices such as the iPhone, and can also customize different sizes. For the display effect of the screen, you only need to enter a url or even a local url (such as: http://127.0.0.1/), and you can see the display effect of the website on screens of different sizes.

8. Implement responsive layout design through Media Queries

Okay, we understand what Media Query is, let’s apply responsive layout design together Go to the project. The design idea is very simple. First define the fixed width under the standard browser (if the resolution of the standard browser is 1024px, then we set the width to 980px), and then use Media Query to monitor the size change of the browser. When the browser When the resolution is less than 1024px, the width of the page is set to a percentage display through the Media Query preset style sheet, so that the structural elements of the subpage will be adjusted accordingly according to the size of the browser. In the same way, when the browser's visible area changes to a certain value (for example, 650px), the structural elements of the page are adjusted accordingly according to the cascading style sheet preset by Media Query. Take a look at our example:

/* When the browser’s viewable area is less than 980px */

@media screen and (max-width: 980px) {

# wrap {width: 90%; margin: 0 auto;}

#content {width: 60%; padding: 5%;}

#sidebar {width: 30%;}

#footer {padding: 8% 5%; margin-bottom: 10px;}

}

/* When the browser’s visible area is less than 650px */

@media screen and (max-width: 650px) {

#header {height: auto;}

#searchform {position: absolute;top: 5px;right: 0; }

#content {width: auto; float: none; margin: 20px 0;}

#sidebar {width: 100%; float: none; margin: 0;}

}

Through the above we can monitor changes in the browser's visible area. When our page structure elements change accordingly, of course you can set up several more sizes of monitoring cascades. Style sheets allow for responsive layout based on devices of different sizes. For better display, we often have to format the initial values ​​of some CSS properties:

/* Disable automatic font size adjustment in Safari on iPhone*/

html {

-webkit-text-size-adjust: none;

}

/* Set HTML5 elements to blocks*/

article, aside, details, figcaption, figure , footer, header, hgroup, menu, nav, section {

display: block;

}

/* Set adaptive adjustments such as pictures and videos*/

img {

max-width: 100%;

height: auto;

width: auto9; /* ie8 */

}

.video embed, .video object, .video iframe {

width: 100%;

height: auto;

}

The last thing to note is to add the following sentence between the head of the page ∶