移动端适配

4.1.3 利用第三方库lib-flexible动态font-size
下载地址：GitHub - amfe/lib-flexible: 可伸缩布局方案

核心代码和上面写js是差不多的，主要他处理一些别的情况，比如屏幕是否支持0.5px,还有页面跳转问题。

效果一样的：

4.1.4 rem单位-px转成rem的方案
上面我们已经解决了动态生成font-size了，但是我们要把px转成rem。

375px的屏幕font-size就是37.5，100px宽的盒子就是100除以37.5。每一次都要运算。这就很麻烦。

4.1.5第一种：手动用计算器算。（不推荐）
比如有一个在375px屏幕上，100px宽度和高度的盒子
我们需要将100px转成对应的rem值:
100/37.5=2.6667，其他也是相同的方法计算即可
4.1.6 第二种用less的混合scss的函数
.pxToRem(@px) {
result: 1rem * (@px / 37.5);
}

.box {
width: .pxToRem(100)[result];
height: .pxToRem(100)[result];
background-color: orange;
}

p {
font-size: .pxToRem(14)[result];
}

这种比上面的方便很多，但是也不是很好。要写很多的函数名。

4.1.7 第三种:postcss-pxtorem
目前在前端的工程化开发中，我们可以借助于webpack的工具来完成自动的转化;

例如，设计稿375的那就在375上布局写px，之前怎么布局现在就怎么布局。后面打包就会自动修改。

下载插件：npm i postcss-pxtorem -D

插件官网

在根目录下新建一个postcss.config.js文件，下面提供了一份基本的 PostCSS 示例配置，可以在此配置的基础上根据项目需求进行修改。

// postcss.config.js
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*'],
},
},
};
其他设计稿的可以修改rootValue的值
4.1.8 第四种:VSCode插件
px to rem的插件，在编写时自动转化

然后直接打100px就可以看得到，然后选rem就可以了。就不用直接算了。

4.2 vw单位 (方案二)
vw单位是相对于视口的。比如375px的屏幕就是1vw==3.752px。

基于375屏幕：

<style>
    /* 设置给375px的设计稿 */
    /* 1vw = 3.75px */
    .box {
        /* width: 100px / 3.75px = 26.6667vw */
        width: 26.6667vw;
        height: 26.6667vw;
        background: #8ec04c;
    }

    p {
        font-size: 3.2vw;
    }
</style>


<div class="box">
    <p>紫陌学前端</p>
</div>