Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "what are the skills of html5 responsive layout". The editor shows you the operation process through actual cases, the operation method is simple and fast, and it is practical. I hope this article "what are the skills of html5 responsive layout" can help you solve the problem.

1. What is a responsive layout?

Responsive layout is a concept put forward 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 is born to solve the problem of mobile Internet browsing. Responsive layout can provide more comfortable interface and better user experience for users of different terminals, and with the popularity of large-screen mobile devices, it is not too much to describe the general trend.

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

What are the advantages and disadvantages of responsive layout?

Advantages:

Strong flexibility in the face of different resolutions

Can quickly solve the problem of multi-device display adaptation.

Disadvantages:

Compatible with all kinds of equipment, heavy workload and low efficiency

The code is cumbersome, there will be hidden useless elements, and the loading time will be longer

In fact, this is a kind of eclectic design solution, which is affected by many factors and cannot achieve the best effect.

To a certain extent, the original layout structure of the website has been changed, and the users will be confused.

Third, how to design the responsive layout?

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

Media Query (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 / tactile device.

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

Picture ratio aspect-ratio dot matrix printer and so on.

Equipment ratio device-aspect-ratio- dot matrix printer and so on.

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

Resolution resolution of the device

3. Grammatical structure and usage

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

Usage:

Example 1: use @ media in link:

The only in use above can be omitted and limited to the 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 style sheet:

Copy the code

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

The resolution (width) of the computer display is greater than or equal to 1024px (and the maximum visible width is 989px); the screen width is in the 480px and below the handheld device; the screen width is placed in the 480px and horizontally (that is, the size is parallel to the ground)

Screen width greater than or equal to 480px less than 1024px and vertically placed device css style.

Fourth, realize the responsive layout

Copy the code

The code is as follows:

Http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">

Document

/ * *

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)

Then use Media Query to monitor the size change of the browser, when the browser resolution is less than 1024px

The width of the page is set to a percentage display through the Media Query preset style sheet

In this way, the structural elements of the page will be adjusted according to the size of the browser.

Similarly, when the visual area of the browser changes to a certain value (if 650px)

The structural elements of the page are adjusted according to the cascading style sheets preset by Media Query. Take a look at our example:

* * /

/ * when the visual area of the browser is less than 980px * /

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

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

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

# sidebar {width: 30%;}

# footer {padding: 8% 5% Matt Marvell bottom: 10px;}

}

/ * when the visual area of the browser is less than 650px * /

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

# header {height: auto;}

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

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

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

}

/ * * for better display, we often have to format the initial values of some CSS attributes: *

/ * disable automatic font size adjustment of Safari in iPhone * /

Html {

-webkit-text-size-adjust: none

}

/ * set the HTML5 element to block * /

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

Display: block

}

/ * set self-adaptive adjustments such as pictures and videos * /

Img {

Max-width: 100%

Height: auto

Width: auto/9; / * ie8 * /

}

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

Width: 100%

Height: auto

}

This is the end of the introduction to "what are the skills of html5 responsive layout". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.