常见的移动端适配方案

常见的移动端适配方案

• 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>