响应式布局的自我理解

一．理解概念

简单说就是一个网站能在不同分辨率的电脑和手机中正常或更好的显示网站布局及内容。

二．允许自动调整

1.html网页代码head标签中加入viewport（viewport是指用户网页的可视区域）

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

* width属性控制设备宽度，值device-width确保页面能正确呈现在不同设备

* initial-scale=1.0确保页面加载时，以1:1的比例呈现，不会有任何缩放

2.兼容性，主流浏览器都支持这个设置（其中IE浏览器>=IE9，兼容低版本IE需加上下面的代码）

<!--[if lt IE 9]>
　　<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

三．网站宽度

由于网站是要随之不同设备屏幕宽度调整的，所以css代码中宽度值避免使用绝对大小（px）

.wrap{
  width:100%;  /* width:auto; */  
}

* 可以设置用"%"为单位的值（相对于父元素或浏览器）

* 或者直接设置值为“auto”

四．字体

1.避免使用px做文字单位

2.使用相对大小em为单位

body{
 font-family: 'Lato', sans-serif;
 font-size:14px; /*默认父元素字体大小*/
}
.h-title{
 font-size:1.14em; /*相对大小*/
}

* 通常1em=16px（浏览器默认字体大小16px），em是指父元素的字体大小，例如12px=0.75em, 14px=0.875em...

* 在一个页面上设置一个父元素的字体大小，就可以通过调整一个元素来成比例的改变所有元素大小

* 假设1em=14px, 则12px=0.857em, 16px=1.14em...以此类推

五．流体布局

1.各个区块的位置都是浮动的（float），不是固定不变的

/*宽度设置，使用%为单位*/
.col_full { width: 100%; }
.col_half { width: 48%; }
.col_one_third { width: 30.63%; }
.col_two_third { width: 65.33%; }
.col_one_fourth { width: 22%; }
.col_three_fourth { width: 74%; }
.col_one_fifth { width: 16.8%; }
.col_two_fifth { width: 37.6%; }
.col_three_fifth { width: 58.4%; }
.col_four_fifth { width: 79.2%; }
.col_one_sixth { width: 13.33%; }
.col_five_sixth { width: 82.67%; }
/*流体布局，使之浮动*/
.col_full,.col_half,.col_one_third,.col_two_third,
.col_three_fourth,.col_one_fourth,.col_one_fifth,.col_two_fifth,
.col_three_fifth,.col_four_fifth,.col_one_sixth,.col_five_sixth {
    display: block;
    margin-right: 4%;
    float: left;
}

2.使用绝对定位（absolute）要特别注意

六．媒体查询（Media Queries）

1.@media 可以针对不同的屏幕尺寸设置不同的样式，当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

* 不同设备链接不同样式：<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css"/>

/*最大宽度为1199px，小于1199px时执行链入的style.css样式*/
<link rel="stylesheet" type="text/css" media="screen and (max-width: 1199px)" href="style.css" />

/*最小宽度为992px，最大宽度为1199px，小于992px大于1199px之间时执行链入的style.css样式*/
<link rel="stylesheet" type="text/css" media="screen and (min-width: 992px) and (max-width: 1199px)" href="style.css" />

* 不同设备加载不同样式：@media not|only mediatype and (expressions) { CSS 代码...; }

/*最小宽度为1600px，即是大于1600px宽度时执行括号内代码*/
@media screen (min-width: 1600px) {
 css code......
}
/*最大宽度为1199px，即是小于1199px宽度时执行括号内代码*/
@media screen (max-width: 1199px) {
 css code......
}
/*最小宽度为992px,最大宽度为1199px，即是大于992px小于1199px宽度之间时执行括号内代码*/
@media screen (min-width: 992px) and (max-width: 1199px){
 css code......
}
/*最大宽度为991px，即是小于991px宽度时执行括号内代码*/
@media screen (max-width:991px) {
 css code......
}
/*最小宽度为768px,最大宽度为991px，即是大于768px小于991px宽度之间时执行括号内代码*/
@media screen (min-width: 768px) and (max-width: 991px){
 css code......
}
/*最大宽度为767px，即是小于767px宽度时执行括号内代码*/
@media screen (max-width: 767px) {
 css code......
}
/*最小宽度为480px,最大宽度为767px，即是大于480px小于767px宽度之间时执行括号内代码*/
@media screen (min-width: 480px) and (max-width: 767px) {
 css code......
}
/*最大宽度为479px，即是小于479px宽度时执行括号内代码*/
@media screen (max-width: 479px) {
 css code......
}

2.调试，可以使用谷歌浏览器直接点击“F12”快捷键或右键单击页面选择“检查”打开调试窗口，选择手机模式进行不同设备的调试

3.兼容

七．图片自适应

1.img标签设置max-width为100%，不过为了兼容IE低版本也可直接设置width：100%；

img{
　　width:100%;
　　height:auto;
}

2.背景background-size可以设置为contain(背景图片将按比例自适应内容区域)，100% 100%（背景图片将延展覆盖整个区域），cover（背景图像完全覆盖背景区域）；