响应式页面布局

1.设置viewport/scale
2.使用流体宽度
3.媒体查询
4.Rem单位转换
5.移动优先

媒体查询（Media Queries）

》普通手机
@media (max-width:500px){....（样式内容）}
》平板
@media (min-width:501px) and (max-width:768px){....}
》电脑
@media screen and (max-width:1200px){....}
》超宽屏
@media screen and (min-width:1201px){....}

rem

推荐使用rem代替em

html{
font-size : 10px;
//font-size:62.5%; 和10px是一样的作用
}
#box h1{
font-size  :  2rem; //20px
}
#box p{ 
font-size : 1.6rem;//16px
line-height : 1.7rem; //17px
}
 如果最后结果不一样，调节浏览器的最小字体大小

header{