Webpack实现将CSS中的px转换为rem
Posted aiguangyuan
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Webpack实现将CSS中的px转换为rem相关的知识,希望对你有一定的参考价值。
由于现在众多移动设备的兴起,各种手机厂商推出了许多不同屏幕尺寸大小的手机型号,前端人员在编写代码时就需要适配各种手机屏幕。
传统的样式适配是利用CSS 的媒体查询,但是这种方式要为每一种规格尺寸的屏幕写一套代码适配,比较繁琐。
这种情况下,利用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库。
以上是关于Webpack实现将CSS中的px转换为rem的主要内容,如果未能解决你的问题,请参考以下文章