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

This article shares with you the content of sample analysis of responsive and adaptive layouts in web development. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

1. Set the Meta label

Most mobile browsers enlarge the HTML page to a wide view (viewport) to match the screen resolution. You can use the meta tag of the view to reset. The following view tab tells the browser to use the width of the device as the view width and to disable initial zooming. Add this meta tag to the tag.

[1] (the user-scalable=no attribute can solve the problem that the touch can not return to the specific size until the iPad switches the landscape screen. )

3. Set the style Media Queries through media query

Media Queries is the core of responsive design.

It tells the browser based on conditions how to render the page for the specified view width. If the resolution of a terminal is less than 980px, you can write:

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

# head {... }

# content {... }

# footer {... }

}

The style here will overwrite the style already defined above.

4. Set multiple attempt widths

If we want to set a view that is compatible with iPad and iPhone, we can set it like this:

@ media only screen and (min-width: 768px) and (max-width: 1024px) {}

@ media only screen and (min-width: 320px) and (max-width: 767px) {}

Well, it's pretty much the same principle.

1. Percentage required for width

For example:

# head {width: 100%}

# content {width: 50%;}

two。 The method of dealing with picture zooming

A simple solution can use percentages, but this is not friendly and will enlarge or shrink the image. Then you can try to specify the maximum width of the picture as a percentage. If the picture exceeds, zoom out. If the picture is small, it will be output in its original size.

Img {width: auto; max-width: 100%;}

Use the and pseudo element + content attribute to dynamically display some content or do other cool things. In CSS3, any element can use the content attribute. This method is to combine the attr attribute of css3 with the function of HTML custom attribute: HTML structure:

CSS Control:

@ media (min-device-width:600px) {

Img [data-src-600px] {

Content: attr (data-src-600px, url)

}

}

@ media (min-device-width:800px) {

Img [data-src-800px] {

Content: attr (data-src-800px, url)

}

}

3. Other attributes

For example, etc., we all need to control the width as well. For, it is recommended that you do not add the padding attribute, and the content is centered at low resolution:

Table?th, table?td {padding: 0; text-align: center;}

Thank you for reading! This is the end of this article on "sample analysis of responsive layout and adaptive layout in web development". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

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.