How responsive layout responsive layout using summary rem units

This chapter is divided into the following sections

• Correct understanding of responsive design
• Step responsive design
• Responsive design issues need to pay attention

What is a responsive layout?

　　Responsive web design a website that is compatible with multiple terminals - instead of doing a specific version for each terminal. Figuratively speaking: now there are a lot of social response products, such as pull-out sofa, folding bed and so on, when we need to put into a corner of the sofa when the sofa at the moment it is like div, and the corner somewhere like the parent element, the parent element due to changes in space, we had to adjust div, you can remain in the corner. In the project, you will encounter different terminals, terminal due to different resolution, so you have to let the user experience better, he will be able to make your page more compatible terminals.

　　 In other words, according to different screen resolutions, make the same visual effect.

Step responsive design

　　1. Preparation of non-responsive Code

　　2. Processing responsive to the code

　　3. Details of the process in response to the formula

　　4. Development completion response of formula

1. layout and meta tags settings

　　When you create a responsive website, or become non-responsive website responsive, the first thing to pay attention to layout elements. I would like to write a non-responsive layout responsive layout created when the habit, fixed width page size, I think this is for all of you without any difficulty. If you have completed a non-responsive then I'm going to add media queries (Media Query) and response type code. This operation is easier to achieve responsive characteristic.

　　When you're done when you have completed the site is not responding, do the first thing in your HTML page, between the tags and paste the following code into. This will set the screen at 1: 1 size display, providing a full view of the site in the browser browse iPhone and other smart phone device and prevents users zoom page.

<Meta name = " the viewport " Content = " width = Device-width, Initial-Scale =. 1, maximum-Scale =. 1, User-Scalable = NO " > 
<Meta HTTP-equiv = " X--the UA-Compatible " Content = " IEs = Edge, Chrome =. 1 " > 
<Meta name = " HandheldFriendly " Content = " to true " > 

User -scalable ipad property can be solved after switching back to the touch-screen cross a particular size problems.

 

2. Set style media query by media queries

　　media query is the core of responsive design, it is able to communicate and browser, tell the browser how to render the page, the resolution if a terminal is less than 980px, you can write

Screen and @media (max- width: 980px) { 
     #head {...} 
     #content {...} 
     the #footer {...} 
} style pattern before there will overwrite defined.

3. Set view more width

　　If we are to ipad and iphone compatible view, we can set up:

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

/**也可以按需导入css文件**/
<link rel = "stylesheet" href = " " meida ="screen and (min-width:340px) and (max-width:720px)">

4. font settings

　　So far, the developers used font units are mostly pixels, although the pixels is Ok on a normal website, but we still need to respond to type font. A responsive font width should be associated with its parent container, so as to adapt to the client screen. css3 introduced a new unit called the rem, and em similar but Html elements, rem more convenient to use. rem is relative to the root element, do not forget to reset the root element font size:

{font-size HTML: 100 % ;} 
is completed, you can define responsive Font: 
@media (min -width: 640px by) {{font- body size: 1 rem;}} 
@media (min -width: 960px) { {font-size body: 1 .2rem;}} 
@media (min -width: 1200px) {body {font-size: 1 .5rem;}} 
does not understand children's shoes rem, where we recommend a well written the blog (HTTP: // www.cnblogs.com/YYvam1288/p/5123272.html)

Layout table in response to 5

 

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="index.css"/>
    <link rel="stylesheet" type="text/css" href="index01.css" media="screen and (max-width:1024px) and (min-width:720px)"/>
    <link rel="stylesheet" type="text/css" href="index02.css" media="screen and (max-width:720px)"/>
</head>
<body>
<div class="header">头部</div>
<div class="main clearfix">
    <div class="left">左边</div>
    <div class="center">中间</div>
    <div class="right">右边</div>
</div>
<div class="footer">底部</div>
</body>
</html>


// index.css
*{
    margin:0;
    padding:0;
    text-align:center;
    color:yellow;
}

.header{
    width:100%;
    height:100px;
    background:#ccc;
    line-height:100px;
}
.main{
    background:green;
    width:100%;
}
.clearfix:after{
    display:block;
    height:0;
    content:"";
    visibility:hidden;
    clear:both;
}
.left,.center,.right{
    float:left;
}
.left{
    width:20%;
    background:#112993;
    height:300px;
    font-size:50px;
    line-height:300px;
}
.center{
    width:60%;
    background:#ff0;
    height:400px;
    color:#fff;
    font-size:50px;
    line-height:400px;
}
.right{
    width:20%;
    background:#f0f;
    height:300px;
    font-size:50px;
    line-height:300px;
}
.footer{
    width:100%;
    height:50px;
    background:#000;
    line-height:50px;
}
 

 

//index01.css
.right{
    float:none;
    width:100%;
    background:#f0f;
    clear:both;
}
.left{
    width:30%;
}
.center{
    width:70%;
}
.main{
    height:800px;
}
 





//index02.css
.left,.center,.right{
    float:none;
    width:100%;
}

Table responsive example　

 

 

Renderings

Responsive design issues need to pay attention

1. The width is not fixed, the percentage may be used

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

 

2. Picture

　　Pictures of the liquid can be achieved picture adaptation.

　　Pictures in html page, such as article inserted picture we can control the maximum width of the picture by css style max-width, such as:

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

　　除了img标签的图片外我们经常会遇到背景图片，比如logo为背景图片：

   #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是css3的新属性，用于设置背景图片的大小，有两个可选值，第一个值用于指定背景图的width,第2个值用于指定背景图的height,如果只指定一个值，那么另一个值默认为auto。
    background-size:cover; 等比扩展图片来填满元素
    background-size:contain; 等比缩小图片来适应元素的尺寸

 

参考文章
　　（１）《响应式布局总结》　　

　　(2) " How to use the unit rem "

　　 (3) "H5 page layout of the image of the liquid (adaptive) Processing Description"

Responsive layout example

git html code for HTTPS: // github.com/lifenglei/mygit/blob/master/xiang.html 
CSS Code HTTPS: // github.com/lifenglei/mygit/blob/master/xiang.css

This chapter is divided into the following sections

• Correct understanding of responsive design
• Step responsive design
• Responsive design issues need to pay attention

What is a responsive layout?

　　Responsive web design a website that is compatible with multiple terminals - instead of doing a specific version for each terminal. Figuratively speaking: now there are a lot of social response products, such as pull-out sofa, folding bed and so on, when we need to put into a corner of the sofa when the sofa at the moment it is like div, and the corner somewhere like the parent element, the parent element due to changes in space, we had to adjust div, you can remain in the corner. In the project, you will encounter different terminals, terminal due to different resolution, so you have to let the user experience better, he will be able to make your page more compatible terminals.