摘要：移动端自适应屏幕大概有4种方法，分别为viewport、rem、media、percentage。
指的是用户网页的可视区域。通过在头部加入meta标签，即可自适应手机屏幕
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>| 属性名 | 取值 | 描述 |
| width | device-width | 设置视口宽度 |
| height | device-height | 设置视口高度 |
| initial-scale | [0.0-10.0] | 设置初始缩放值 |
| minimum-scale | [0.0-10.0] | 设置缩小最小比例，不得大于maximum-scale |
| maximum-scale | [0.0-10.0] | 设置放大最大比例，不得小于minimum-scale |
| user-scalable | yes/no | 设置是否允许用户手动缩放页面，默认值yes |
CSS3新增的一个相对单位,是相对于html根元素的相对大小。它方便的地方是，通过修改根元素的大小就可以成比例地调整所有字体大小，又可以避免(使用em)字体大小逐层复合的连锁反应。
body {
font-size: 10px;
}
p {
font-size: 1.5em;
margin: 0.5em;
padding: 2.0rem;
}$$p的字体大小继承了body字体：10px \times 1.5 = 15px \\p的margin属性则是相对于本元素字体大小： 15px \times 0.5 = 7.5px \\p的padding属性：16px \times 2 = 32px \\$$
body选择器中声明Font-size=62.5%;将你的原来的px数值除以10，然后换上rem作为单位；媒体查询是为不同媒体设置不同的css样式，包括页面尺寸，设备屏幕尺寸等，简单例子：
/*固定格式：*/
@media screen and (max-width: 460px) {
/*460px表示当浏览器窗口小于460px时，执行css样式。
css样式;*/
}
@media screen and (max-width: 460px) {
.header_con {
width: 90%;
margin: 10px auto;
}
}百分比，是指占父元素的比例，简单例子：这里的div的父元素是body，则其宽度：$$500px \times 50\%= 250px$$
body {
width: 500px;
}
div {
width: 50%;
}
https://blog.csdn.net/baidu_36847344/article/details/64441851
https://segmentfault.com/a/1190000016396642
http://www.alloyteam.com/2016/03/mobile-web-adaptation-tool-rem/
收藏