响应式布局

*响应式和自适应的区别

简单来说，自适应在不同大小的设备上呈现同样的网页；响应式可以根据屏幕的大小自动的调整页面的展现方式，以及布局。

*实现方式

1、允许网页宽度自动调整
网页代码头部，加入viewport元标签

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

2、尽量少用绝对宽度
使用百分比或auto

width:xx%
width:auto;

小tips:
css中某些值相互依赖，我们也可以用代码表达出来

font-size:125%;
line-height:1.5;

3、相对大小的字体
字体也不使用绝对大小（px），使用相对大小（em或rem）
em（font size of the element）是指相对于父元素的字体大小的单位；rem（font size of the root element）是指相对于根元素的字体大小的单位。

html{
  font-size:20px;
}
.box{
  width:6rem;
  height:3rem;
  /*width=6*20=120px,height=3*20=60px*/
}

若将font-size写为百分比形式

html{
  font-size:125%;
}
/*默认font-size是16px，所以经计算得125%*16=20px*/
.box{
  width:6rem;
  height:3rem;
  /*width=6*20=120px,height=3*20=60px*/
}

4、流动布局
各个区块位置是浮动的，float可以使放不下的布局自动滚动排布到后方。

5.选择加载CSS

　<link rel="stylesheet" type="text/css"
　　　　media="screen and (max-device-width: 400px)"
　　　　href="style.css" />

6、@media
同一个CSS文件中，根据不同的屏幕分辨率，选择应用不同的CSS规则。

7、图片自适应

　img { 
　max-width: 100%;
　}