fontSize = fontSize > MAX_FONT_SIZE ? MAX_FONT_SIZE : fontSize
html.style.fontSize = fontSize + 'px'
})
px 转
rem
pxToRem 方案一
$rootFontSize: 375 / 10;
// 定义 px 转化为 rem 的函数
@function px2rem ($px) {
@return $px / $rootFontSize + rem;
}.demo {
width: px2rem(100);
height: px2rem(100);
}
pxToRem 方案二
vue-cli3 中配置 装
postcss-pxtorem 插件就可以了，其他平台大致差不多
const autoprefixer = require('autoprefixer')
const pxtorem = require('postcss-pxtorem')
module.exports = {
// ...
css: {
sourceMap: true,
loaderOptions: {
postcss: {
plugins: [
autoprefixer(),
pxtorem({
rootValue: 37.5,
propList: ['*']})
]}
}
}
}点击快速配置 H5 项目工程
继续探索postcss-pxtorem 插件源码，查看它实现的原理
function createPxReplace (rootValue, unitPrecision, minPixelValue) {
return function (m, $1) {
if (!$1) return m;
var pixels = parseFloat($1);
if (pixels < minPixelValue) return m;
var fixedVal = toFixed((pixels / rootValue), unitPrecision);
return (fixedVal === 0) ? '0' : fixedVal + 'rem';
};
}
px 变换成
rem 主要是这个函数，当然里面有很多可配置的参数, 核心原理和我们方案一差不多，方便在于，不需要每次写
px 都要加上一个函数，代码也清晰很多是不是所有元素
px 都要转换成
rem 呢？，那可不一定哦，
border 中的
px 不应该转 rem，涉及到另外一个
1px 的问题，上一篇文章详细论述过，避免
px 转
rem ，将
border 中的
px 大写成
PX/Px/pX1px 适配问题请移至吃透移动端 1px
解决方案二：vh + vw
原理
vw 相对于视窗宽度的单位，随宽度变化而变化。由此看来，方案一其实是方案二的一种 Hack, 通过使用监听实现了方案二的效果
