CSS3-Responsive layout

• First: correctly understand responsive layouts

  Responsive web design is a Web site that can be compatible with multiple terminals-instead of making a specific version for each terminal. For example: Now the community has a lot of response products, such as folding sofa, rollaway bed and so on, when we need to put the sand to a corner, the sofa is like Div, and somewhere in the corner is like the parent element, because the parent element space changes, we have to adjust the div, So that it can still be put in the corner. In the project you will encounter different terminals, because the terminal resolution is different, so you want to make the user experience better, it is necessary to make your page compatible with multiple terminals.

  Second: The steps of responsive design

  Knowing what the response is, then we'll talk about the steps of responsive design, and someone will say, "Bo-Man, you're a fool, the step of responsive design is not 1. Write non-responsive code, 2. Process into a responsive code, 3. Responsive detail processing, 4. Complete responsive development? Bo main Chrysanthemum A shock original master in the folk ah, slightly a hard expression of respect, I go, said the wrong is a slight smile, we do not misunderstand ah.

Back to the point, bloggers because it is not a group, so on the response to the design of the graves planing, in-depth understanding of these four steps.

1. Layout and Settings meta tag

When creating a responsive web site, or when a non-responsive web site becomes responsive, focus first on the layout of the element. I am accustomed to write non-responsive layout when creating the responsive layout, the page fixed width size, I think this to everyone here is not any difficulty. I'm going to add media query and responsive code if I'm done with non-responsive. This operation makes it easier to implement responsive features.

When you're done with an unresponsive site, the first thing to do is to paste the following code between your HTML page and the tag. This will set the screen to a size of 1:1, which provides a full view of the website in the browser of the IPhone and other smartphones, and prevents users from zooming in on the page.

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="HandheldFriendly" content="true">user-scalable属性能够解决ipad切换横屏之后触摸才能回到具体尺寸的问题。

2. Set the style media query

Media query is the core of responsive design, it can communicate with the browser to tell the browser page how to render, if the resolution of a terminal is less than 980px, then write

and (max-width:980px){     #head { … }     #content { … }     #footer { … }}这里面的样式会覆盖掉之前所定义的样式。

3. Set multiple view widths

If we're going to be compatible with the ipad and iphone view, we can set this up:

/**ipad**/@media only screen and (min-width:768px)and(max-width:1024px){}/**iphone**/ @media only screen and (width:320px)and (width:768px){}

3. Font settings

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 introduced 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, and do not forget to reset the font size of the roots:

html{font-size:100%;}完成后，你可以定义响应式字体：@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;}}不理解rem的童鞋，在这里给大家推荐一篇写的不错的博客(http://www.cnblogs.com/YYvam1288/p/5123272.html)

4. Responsive design issues to be aware of

1. Width is not fixed, can use percent

#head{width:100%;}#content{width:50%;}

2. Image processing

Here I give everyone a key, some people will say, Bo Master, can not pretend to force? Picture processing What's the key, you think it's the door, Bo-Master, Wake up.

Oh, my temper, I said the key is not the real key, but refers to the image of the universal method of processing, what is it? is the picture liquid. Then someone asks, "What is picture liquid?" This question is very good, give you 99 points, more give you a point afraid of your pride, we all know that water invisible can be suitable for many containers, then if we take the picture as water is not can realize the picture adaptive problem?

In the HTML page of the picture, such as the text inserted in the image we can use CSS style max-width to control the maximum width of the picture, such as:

    #wrap img{        max-width:100%;        height:auto; } 如此设置后ID为wrap内的图片会根据wrap的宽度改变已达到等宽扩充，height为auto的设置是为了保证图片原始的高宽比例，以至于图片不会失真。

In addition to the IMG tag images we often encounter background images, such as the logo for the background image:

    #loga{Display:block;Width100%;Height40px; text-indent:55REM; background-img:url (logo.png); background-repeat:no-repeat; background-size:100%  100%; The span class= "Hljs-selector-tag" >background-size is a new property of the CSS3, which sets the size of the background picture, with two optional values, The first value specifies the width of the background graph, and the 2nd value is used to specify the height of the background graph, if only one value is specified, Then the other value defaults to auto. background-size:cover; expand the image to fill the element background-size:contain; resize the image to fit the dimensions of the element   

Finally, we summarize the implementation principle of the response layout first, we should follow the mobile priority, interaction and design to mobile-based, the PC as a mobile extension, a page needs to be compatible with different terminals, then there are two key points is we need to do responsive: responsive layout and responsive content (image, multimedia)

        1.响应式布局           1.Meta标签定义           2.使用Media Queries适配对应样式        2.响应式内容            1.响应式图片  

CSS3-Responsive layout