移动端要适配各种不同的机型,那么像往常一样使用px就存在不同机型尺寸的不统一,但是用rem会帮我们自动适配. 那么一般我们拿到的UI设计图,都是750px的,怎么转换呢?
下面分享下, 我找到的 , 并且我本来项目里就有这种方式的,(只是我不知道):
1:技术/插件
1.vue-cli:使用脚手架工具创建项目。
2.postcss-pxtorem:转换px为rem的插件。(主要)
2:自动设置根节点html的font-size
因为rem单位是相对于根节点的字体大小的,所以通过设置根节点的字体大小可以动态的改变rem的大小。
引用步骤:
①:创建 rem.js 文件
(很多人写这种小工具文件会习惯性的加上闭包,这个其实是没有必要的。ES6中每个文件都是单独的一个模块。)
// 基准大小
const baseSize = 32
// 设置 rem 函数
function setRem () {<