移动端网页最大的特点是什么？自适应不同尺寸的屏幕！高大上的叫法:响应式！
知道了自适应网页怎么做岂不是能很好解决问题了？那么自适应网页怎么做呢？网上关于这方面的文章有很多，我简单的整理一下。
一、 HTML设置
在head中加入meta标签
简单解释一下：
我规定“页面宽度 ＝ 屏幕宽度，初始缩放比例为1，允许用户最大和最小伸缩比都是1，不允许用户手动缩放”
深入了解 viewport
二、CSS解决方案
解决思路
始终贯彻能用css解决的坚决不用js
那么你想到了什么？媒体查询！@media 可以针对不同的屏幕尺寸设置不同的样式！
有了 @media 根据 每一个尺寸的屏幕设计一套样式表出来？！那岂不是写到吐血
除了 @media，我们还需要rem来配合使用。
大家应该知道em 是相对于父级元素来设置字体大小的，而我们的rem是相对于根元素的。
这一点很重要。所以我们只要在 @media 中设置不同屏幕尺寸的 根元素的字体大小即可。
步骤一：根据设计稿制作标准web页
我们以iPhone6两倍设计稿标注来制作网页。宽度为750px 设置如下：
html,body {font-size:100px;}
/* 规定 1rem = 100px;
* 我们就可以根据这个比例来设计制作出一套css样式表布局这个页面，这个页面在宽度为750px时就完美显示了。例如：
*/
header {
width: 100%; // 宽度还可以结合百分百来使用
height: .98rem; // 高度为98px
border-radius: .49rem; // 圆角为49px
font-size: .24rem; // 字体为24px
}
步骤二、@media设置根元素的字体大小
重点来了，我们只需要使用@media来设置不同屏幕尺寸的 根元素的字体大小。主流设备设置如下：
@media on