postcss-pxtorem px转成rem 项目配置

在做大屏态势感知类型的项目指定会需要做适配，h5了这些.....

postcss-pxtorem 可以把你的px转化成rem(好用推荐）

说说怎么用吧：

第一步：

npm install postcss-pxtorem -D

第二步引入：

方法一：在vue.config.js中

module.exports = {css: {loaderOptions: {postcss: {plugins: [require('postcss-pxtorem')({//这里是配置项，详见官方文档rootValue : 16, // 换算的基数// selectorBlackList: ['weui','mu'], // 忽略转换正则匹配项propList: ['*'],}),]}},}
}

这个样就引入成功了，需要重新运行项目啊

方法二：就是换了一种方法引入罢了看你想用哪个把

创建一个.postcssrc.js

module.exports = {plugins: {autoprefixer: {},'postcss-pxtorem': {rootValue: 16,propList: ['*'],// exclude: /^((?!((cccc)(\/|\\)(aaa)(\/|\\)(bbb))).)*$/,},},};

说下参数吧：

`rootValue`	（数字\|函数）表示根元素字体大小或根据`input`参数返回根元素字体大小
`unitPrecision`	数字）允许REM单位增长的十进制数字。
`propList`	（数组）可以从px更改为rem的属性。值必须完全匹配。使用通配符``启用所有属性。例：`['']` ``在单词的开头或结尾使用。（`['position']`将匹配`background-position-y`）使用`!`不匹配的属性。例：`['', '!letter-spacing']` 将“ not”前缀与其他前缀组合。例：`['', '!font'`
`selectorBlackList`	（数组）要忽略的选择器，保留为px 如果value是字符串，它将检查选择器是否包含字符串。 `['body']` 将匹配 `.body-class` 如果value是regexp，它将检查选择器是否匹配regexp。 `[/^body$/]`将匹配`body`但不匹配`.bod`
`replace`	布尔值）替换包含rems的规则，而不添加后备。
`mediaQuery`	（布尔值）允许在媒体查询中转换px。
`minPixelValue`	（数字）设置要替换的最小像素值。
`exclude`	（字符串，正则表达式，函数）要忽略并保留为px的文件路径。

当然这就是帮你转成rem了，还是需要你根据窗口resize的

postcss-pxtorem px转成rem 项目配置相关推荐

vue项目全局把px转换成rem
vue项目全局把px转换成rem 首先vscode要有px to rem插件 1.vue.config.js 在vue.config.js中配置 css: {...// css预设器配置loaderO ...
postcss-pxtorem无法将内联样式的px转成rem
在开发移动端项目,发现postcss-pxtorem无法将内联样式的px转成rem,这是一个非常致命的缺点.因为在开发项目时,经常会设置内联样式,那如何解决这个问题呢? 一.场景再现: 我以vue2项 ...
在vue项目中将px自动成rem
第一步: 在vue项目中的src文件夹下面创建一个config文件夹,在里面创建一个rem.js文件第二步:将下面代码复制到rem.js中 // 基准大小 const baseSize = 32 / ...
使用postcss-plugin-px2rem和postcss-pxtorem(postcss-px2rem)-px自动转换rem的配置方法-vue-cli3.0
在vue-cli3.0中使用postcss-plugin-px2rem 插件插件的作用是自动将vue项目中的px转换为rem postcss-plugin-px2rem优势: 因为 postcs ...
前端怎么把px单位换成rem单位解决项目页面适配问题
先看没有适配前的效果,下面是没有适配前,使用的是px单位,代码和效果如下: <!DOCTYPE html> <html><head><meta charset ...
vscode怎么自动将px转换成vw_基于react/vue移动端适配之px自动转rem、vw
作为一名前端开发,在做移动端适配时rem.vw是我们经常用到的单位,但是我们在实际开发过程中需要将设计稿上的px转换成rem,如果手动去计算,将是一个很耗时.费力的过程.这是就需要一个工具可以帮我们自 ...
Vue 适配移动端使用 postcss-pxtorem lib-flexible 插件转px为vw rem
vue项目使用Vant框架Rem适配(postcss-pxtorem.lib-flexible )的安装使用 1.安装: 使用的是vue-cli+webpack,通过npm来安装的 npm i pos ...
css自动转rem,css之px自动转rem—“懒人”必备
作为一名前端开发,尤其是在做移动端适配时,rem是我们经常用到的单位,它的好处大家可以自行搜索,网上已经有很多了. 但是我们再将设计稿上的px转换成rem时,得手动的去计算,这是一个很耗时.费力的过程 ...
cssrem转换工具_css之px自动转rem—“懒人”必备
作为一名前端开发,尤其是在做移动端适配时,rem是我们经常用到的单位,它的好处大家可以自行搜索,网上已经有很多了. 但是我们再将设计稿上的px转换成rem时,得手动的去计算,这是一个很耗时.费力的过程 ...

postcss-pxtorem px转成rem 项目配置

postcss-pxtorem px转成rem 项目配置相关推荐

最新文章

热门文章