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

What is the web responsive layout, I believe that many inexperienced people do not know what to do about it, so this paper summarizes the causes and solutions of the problem, through this article I hope you can solve this problem.

Development basics of responsive layout

This chapter is mainly divided into the following parts

Correct understanding of responsive design

Steps for responsive design

Problems needing attention in responsive design

Implementation principle of responsive web page layout

First: a correct understanding of responsive layout

Responsive web design means that a website can be compatible with multiple terminals-rather than making a specific version for each terminal. For example: nowadays, there are many response products in society, such as folding sofa, folding bed and so on. When we need to put the sofa in a corner, the sofa is like div, and somewhere in the corner is like the parent element. Due to the change of the space of the parent element, we have to adjust the div so that it can still be placed in the corner. You will encounter different terminals in the project, because the terminal resolution is different, so if you want to make the user experience better, you need to make your page compatible with multiple terminals.

Second: the steps of responsive design

Now that we know what responsive design is, then we will talk about the steps of responsive design. Some people will say, "blogger, you are stupid, the steps of responsive design are 1. Write non-responsive code, 2. Process into responsive code, 3. Responsive detail processing, 4. Complete responsive development?" Blogger Chrysanthemum shock originally master in the folk ah, slightly a hard show of respect, I went, said wrong is a slight smile, we do not misunderstand ah.

Back to the point, because the blogger is asking questions, so here to respond to the design of the ancestral grave, in-depth understanding of these four steps.

1. Layout and setting meta tags

When creating a responsive site, or when a non-responsive site becomes responsive, pay attention to the layout of the elements first. When I create a responsive layout, I'm used to writing a non-responsive layout with a fixed width, which I don't think is difficult for all of you here. If I'm done with non-responsive, then I'm adding media queries (Media Query) and responsive code. This makes it easier to implement responsive features.

When you are done when you have finished the unresponsive site, the first thing to do is on your HTML page, paste the following code between and tags. This will set the screen to display at 1:1, provide full view of the site in browsers on iPhone and other smartphones, and prevent users from zooming the page.

The user-scalable property can solve the problem that the ipad can not return to the specific size until it is touched after switching the landscape screen.

two。 Set the style media query through media query

Media query is the core of responsive design. It can communicate with the browser and tell the browser how to render the page. If the resolution of a terminal is less than 980px, it can be written like this.

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

# head {... }

# content {... }

# footer {... }

} the styles in this will overwrite the previously defined styles.

3. Set multiple view widths

If we want to be compatible with ipad and iphone views, we can set it like this:

/ * * ipad**/

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

/ * * iphone**/

@ media only screen and (width:320px) and (width:768px) {}

3. Font settin

So far, most of the font units used by developers are pixels, although pixels are Ok on ordinary websites, but we still need responsive fonts. A responsive font should be associated with the width of its parent container in order to accommodate the client screen.

Css3 introduces a new unit called rem, which is similar to em but for Html elements, rem is more convenient to use.

Rem is relative to the root element, so don't forget to reset the font size of the root element:

Html {font-size:100%;}

When you are done, you can define responsive fonts:

@ media (min-width:640px) {body {font-size:1rem;}}

@ media (min-width:960px) {body {font-size:1.2rem;}}

@ media (min-width:1200px) {body {font-size:1.5rem;}}

Do not understand rem's children's shoes, here to recommend a well-written blog (http://www.cnblogs.com/YYvam1288/p/5123272.html)

4. Problems needing attention in responsive design

1. The width is not fixed and the percentage can be used.

# head {width:100%;}

# content {width:50%;}

two。 Picture processing

Here I give you a key, some people will say, blogger, can you stop pretending? Is there any key to the picture processing? you think it's to open the door, blogger, wake up.

Oh, my bad temper, I said the key is not a real key, but refers to the picture processing of the omnipotent method, what is it? It's the liquid state of the picture. Then someone will ask, "what is the liquid state of a picture?" This question is very good, give you a score of 99, give you an extra point for fear of your pride, we all know that water invisible can be suitable for many containers, so if we think of pictures as water, can we achieve picture adaptation?

We can use css style max-width to control the maximum width of images in html pages, such as those inserted in articles, such as:

# wrap img {

Max-width:100%

Height:auto

}

After setting ID to wrap, the picture in wrap will be expanded to equal width according to the width of wrap. The setting of height to auto is to ensure the original aspect ratio of the picture, so that the picture will not be distorted.

In addition to the pictures with img tags, we often encounter background images, such as logo as background images:

# log a {display:block

Width:100%

Height:40px

Text-indent:55rem

Background-img:url (logo.png)

Background-repeat:no-repeat

Background-size:100% 100%

}

Background-size is a new property of css3, which is used to set the size of the background image. There are two optional values, the first value is used to specify the width of the background image, and the second value is used to specify the height of the background image. If only one value is specified, the other value defaults to auto.

Background-size:cover; proportionally expands the picture to fill the element

Background-size:contain; proportionally reduces the picture to fit the size of the element

Finally, let's summarize the implementation principle of responsive layout.

First of all, we should follow the mobile priority, interaction and design based on the mobile, pc as an extension of the mobile, a page needs to be compatible with different terminals, then there are two key points we need to achieve responsive layout and responsive content (pictures, multimedia)

1. Responsive layout

1.Meta tag definition

two。 Use Media Queries to fit the corresponding style

two。 Responsive content

1. Responsive picture

I know what you are looking forward to, no picture, no truth, no dome is nonsense, talk on paper, rest assured that bloggers will not be so begged below to contribute their own responsive layout dome.

Git html Code https://github.com/lifenglei/mygit/blob/master/xiang.html

Css Code https://github.com/lifenglei/mygit/blob/master/xiang.css

After reading the above, have you mastered what is the method of web responsive layout? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

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.