在项目中为了屏幕适配,经常会用到rem,postcss-px2rem就是为了让我们直接在将代码中px自动转化成对应的rem的一个插件.(下边的方法适用于使用cli2脚手架搭建的项目,现在好多数项目使用cli3搭建,我在后边的文章中增加了对cli3项目自适应的配置.) 如何使用: 1.安装 npm i postcss-px2rem –save -dev 2.设置 1...
1. 解释postcss-px2rem的作用postcss-px2rem 是一个 PostCSS 插件,它能够在编译 CSS 时,将所有的 px 单位转换为 rem 单位。这在响应式布局中非常有用,特别是在移动端开发中,使用 rem 单位可以根据不同设备的屏幕大小动态调整元素的大小,以适应不同的屏幕尺寸。而使用固定的 px 单位则无法实现这种自适应效果。
require('postcss-plugin-px2rem')({ rootValue:80,//换算基数//unitPrecision: 5, //允许REM单位增长到的十进制数字。//propWhiteList: [], //默认值是一个空数组,这意味着禁用白名单并启用所有属性。//propBlackList: [], //黑名单exclude:false,//默认false,可以(reg)利用正则表达式排除某些文件夹的方...
@vue/cli 4.5.13 npm install postcss-px2rem module.exports={css:{loaderOptions:{css:{},postcss:{plugins:[require('postcss-px2rem')({remUnit:37.5})]}}} 效果: 不同比例分辨率rem: // 设置 rem 函数 (function (designWidth, minWidth) {<!-- --> var doc = document, win = window, docE...
四、配置postcss-px2rem px2rem的配置放在vue-cli3 项目中vue.config.js中(找不到?可能你是一个新构建的项目,需要手动在项目根目录创建vue.config.js) 具体配置内容如下: 代码语言:javascript 复制 module.exports={css:{loaderOptions:{css:{},postcss:{plugins:[require('postcss-px2rem')({remUnit:37.5...
四、配置postcss-px2rem px2rem的配置放在vue-cli3 项目中vue.config.js中(找不到?可能你是一个新构建的项目,需要手动在项目根目录创建vue.config.js) 具体配置内容如下: module.exports = { css: { loaderOptions: { css: {}, postcss: {
npm i postcss-plugin-px2rem --save -dev 1. 或选择 npm i postcss-pxtorem --save -dev 1. 或选择 npm i postcss-loader --save-dev 1. 具体配置方法如下: 在vue-cli3.0中。去掉了build和config文件夹。所有的配置都放到了vue.config.js中(默认为空,如果没有这个文件自己写一个)。
PostCSS-px2rem 是一个 PostCSS 插件,用于将px 单位转换为 rem 单位。它通过在 CSS 代码中查找所有的像素值(px),并将其转换为 rem 单位来实现这一目的。 使用方法: 安装postcss-pxtorem npm i postcss-pxtorem@5.1.1 -D vue.config.js里面配置postcss-pxtorem ...
配置 vue.config.js 文件 // 1. 引入等比适配插件constpx2rem=require('postcss-px2rem') // 2. 配置基本大小constpostcss=px2rem({// 基准大小 baseSize,需要和rem.js中相同remUnit:100}) // 3. 使用插件module.exports={css:{loaderOptions:{// 等比缩放的插件postcss:{plugins:[postcss]}}} 需要...
npm i lib-flexible postcss-px2rem --save flexible会为页面根据屏幕自动添加标签,动态控制initial-scale,maximum-scale,minimum-scale等属性的值 ===>设备缩放比 一、在main.js中导入 import 'lib-flexible' 二、在vue.config.js中 module.exports ={//设置rem自适应布局css: { ...