一个网站同时适配多种设备和多个屏幕，让网站的布局随用户的使用环境而变化，大大提升了用户友好性
1.viewport（视口）
用于呈现网页的区域； 电脑端的视口宽度等于分辨率，而移动端的视口宽度默认值是设备厂家指定的； 手机端视口一般设为980px，但是字会变得非常小，解决该问题需要如下代码
<meta name="viewport"
content="width=device-width //视口为设备宽度,不设置的话默认为980px
initial-scale=1.0 //初始化的视口大小是1.0倍
maximum-scale=1.0 //最大倍数是1.0倍
user-scalable=0" //不允许缩放窗口
/>
2.图片
img {
max-width: 100%;
}
用 width:100% 图片会被拉伸
3.手机浏览器内核
兼容的前缀：
-webkit-
-ms-
-moz-
-o-
4.流式布局（百分比布局，弹性盒布局）
百分比能够设置的属性是
width（相对父的width）
height（相对父的height）
padding（相对父的width）
margin（相对父的width）
其他属性比如border、font-size不能用百分比设置的。
5.媒体查询（@media）
查询现在看这个网页的设备是什么，以及它的宽度是多少
body {
background-color: grey;
}
@media screen and (min-width:1200px){
body{
background-color: pink;
}
}
@media screen and (min-width:700px) and (max-width:1200px){
body{
background-color: blue;
}
}
@media screen and (max-width:700px){
body{
background-color: orange;
}
}
//screen表示看这个网页的设备是显示器
IE6、7、8不支持媒体查询，也为了防止手机端的某些浏览器不支持媒体查询，所以不要把所有的选择器都放在媒体查询里面。
6.rem响应式布局
-
一般不要给元素设置具体的宽度,但是对于一些小图标可以设定具体宽度值
-
高度值可以设置固定值,设计稿有多大,我们就严格写多大
-
所有设置的固定值都用REM做单位(首先在HTML中设置一个基准值：PX和REM的对应比例,然后在效果图上获取PX值,布局的时候转化为REM值)
-
JS获取真实屏幕的宽度,让其除以设计稿的宽度,算出比例,把之前的基准值按照比例进行重新的设定,这样项目就可以在移动端自适应了
