postcss pxtorem 配置

简介: 【8月更文挑战第9天】

postcss pxtorem 配置

// rootValue: 75, //根标签的font-size大小

// unitPrecision: 5,//转换成rem后的小数位数

// propList: ['*'],//需要转换的属性列表

// selectorBlackList: [],//则是一个对css选择器进行过滤的数组,比如你设置为['fs'],那例如fs-xl类名,里面有关px的样式将不被转换,这里也支持正则写法

// replace: true,

// mediaQuery: false,

// minPixelValue: 12 //设置小于多少尺寸将不会进行转换。

.pipe(postcss([ pxtorem({

rootValue: 50,

propList: ['*'],

replace: true,

minPixelValue: 1

})]))

配置rem.js 文件

const baseSize = 50

// 设置 rem 函数

function setRem () {

// 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改。

const scale = document.documentElement.clientWidth / 375

// 设置页面根节点字体大小

document.documentElement.style.fontSize = (baseSize * scale) + 'px'

}

// 初始化

setRem()

// 改变窗口大小时重新设置 rem

window.onresize = function () {

setRem()

}

引入项目js中

相关文章
|
3月前
|
前端开发
Vite——如何配置使用sass
Vite——如何配置使用sass
244 0
|
6月前
|
JSON 前端开发 JavaScript
CSS模块postcss-modules,在jsx中实现vue里的scoped
CSS模块postcss-modules,在jsx中实现vue里的scoped
|
JavaScript 前端开发 编译器
分享:Babel7的配置
分享:Babel7的配置
291 0
|
3月前
|
自然语言处理 前端开发 JavaScript
postcss 单独不转换_postcss
【8月更文挑战第13天】
75 9
|
5月前
|
资源调度
蓝易云 - Error: PostCSS plugin autoprefixer requires PostCSS 8问题解决办法
以上步骤应该可以解决"PostCSS plugin autoprefixer requires PostCSS 8"的问题。如果问题仍然存在,你可能需要检查你的项目配置,确保没有其他的冲突或问题。
216 0
|
6月前
|
前端开发 开发者
stylus、sass、less区别, Sass 、LESS是什么
【4月更文挑战第1天】stylus、sass、less区别, Sass 、LESS是什么
90 0
|
6月前
|
Web App开发 前端开发 iOS开发
Sass 安装
Sass 安装
57 0
|
iOS开发
|
前端开发 JavaScript
nuxt3:postcss-pxtorem
nuxt3:postcss-pxtorem
485 0
nuxt3:postcss-pxtorem
|
JavaScript 前端开发
Vue使用PostCSS怎样使用sass
众所周知转换 px 单位的插件有很多,知名的有 postcss-px-to-viewport 和 postcss-pxtorem,前者是将 px 转成 vw,后者是将 px 转成 rem,精简了不常用的配置。将成为vw优先单位使用,以rem作为回退模式。考虑到vw在移动设备的支持度不如rem,这款插件很好的解决了该问题。然后简单的介绍下。
108 0