0
点赞
收藏
分享

微信扫一扫

Webpack实现将CSS中的px转换为rem


由于现在众多移动设备的兴起,各种手机厂商推出了许多不同屏幕尺寸大小的手机型号,前端人员在编写代码时就需要适配各种手机屏幕。

Webpack实现将CSS中的px转换为rem_Webpack

传统的样式适配是利用CSS 的媒体查询,但是这种方式要为每一种规格尺寸的屏幕写一套代码适配,比较繁琐。

Webpack实现将CSS中的px转换为rem_css_02

这种情况下,利用rem来实现移动端的适配会更为方便一点。在W3C中,对rem的定义是相对于根元素字体的大小,即根元素的字体大小是10px,那2rem的实际尺寸就是20px。在Webpack中我们可以利用px2rem-loader这个插件在打包时,自动的将px转换为rem,非常方便。

1. 安装插件

npm i px2rem-loader -D

2. 配置Webpack文件

'use strict';
// npm i mini-css-extract-plugin -D
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {

module: {
rules: [
{
test: /.less$/,
use: [
// 将内连样式单独处理为一个样式文件
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader',
// 添加自动补齐后辍
{
loader: 'postcss-loader',
options: {
plugins: () => [
require('autoprefixer')({
// 最近两个版本、使用人数所占比例、兼容哪个版本以上
browsers: ['last 2 version', '>1%', 'ios 7']
})
]
}
},
// 配置将px转为rem的插件
{
loader: 'px2rem-loader',
options: {
// 1rem等于75px,适用于750px视觉稿
remUnit: 75,
// px转成rem后小数点的位数
remPrecision: 8
}
}

]
}
]
},

plugins: [
new MiniCssExtractPlugin({
filename: '[name]_[contenthash:8].css'
}),
]
};

3. 自动计算根元素字体大小

(function (doc, win) {
var element = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
// 设计稿的宽度
designWidth = 750,
calc = function () {
var clientWidth = element.clientWidth;
// 定一个最大的宽度,以免全屏后难看
if (clientWidth > 677) {
clientWidth = 677
};
if (!clientWidth) return;
element.style.fontSize = 40 * (clientWidth / designWidth) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, calc, false);
doc.addEventListener('DOMContentLoaded', calc, false);
})(document, window)

关于自动计算根元素大小也可以使⽤⼿淘的​​lib-flexible​​库。


举报

相关推荐

0 条评论