常见的移动端适配方案
- media queries 媒体查询
- flex 布局
- rem 根字体大小(html标签的字体大小)
- vh vw
- 百分比
一、Media 媒体查询
不同的屏幕宽度加载不同的css代码
核心语法：
@media only screen and (max-width: 374px) {
/* iphone5 或者更小的尺寸，以 iphone5 的宽度（320px）比例设置样式*/
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
/* iphone6/7/8 和 iphone x */
}
@media only screen and (min-width: 414px) {
/* iphone6p 或者更大的尺寸，以 iphone6p 的宽度（414px）比例设置样式 */
}
优点：
- 方法简单，目前像
Bootstrap等框架使用这种方式布局 - 调整屏幕宽度的时候不用刷新页面即可响应式展示
缺点：
- 代码量比较大，维护不方便
二、Flex弹性布局
以天猫的实现方式进行说明：
它的viewport是固定的：
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
高度定死，宽度自适应，元素都采用px做单位
三、rem
rem相对根元素font-size计算值的倍数。根据屏幕的宽度设置html标签 的font-size，在布局时使用rem单位布局
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<script>
// 设置html字体大小
// 切图的时候算(以二倍图为例)
// 实际的大小 = 图片大小/2/rem;
// js:
// 基准rem/基准分辨率 = 新rem/新的分辨率
// 50/375 = 新rem/新的分辨率
// 新rem = 基准rem/基准分辨率*新的分辨率clientWidth;
// 设置rem(设置html的字体大小)
document.documentElement.style.fontSize = 50 / 375 * document.documentElement.clientWidth + 'px';
// 监听resize事件(改变浏览器大小时，设置新的rem)
window.onresize = function (){
document.documentElement.style.fontSize = 50 / 375 * document.documentElement.clientWidth + 'px';
}
</script>
