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>
