postcss-px2vw

一款 PostCSS 插件，将 px 转换成 vw 和 rem。

该插件主要结合了 postcss-pxtorem 和 postcss-px-to-viewport 的功能，精简了不常用的配置。默认将 vw 作为优先单位使用，以 rem 作为回退模式。考虑到 vw 在移动设备的支持度不如 rem，这款插件很好的解决了该问题。

安装

$ npm install @moohng/postcss-px2vw --save-dev

使用

// .postcssrc.js
module.exports = {plugins: {'@moohng/postcss-px2vw': {}}
}

举例：

// input
.class {border: 1px solid black;margin-bottom: 1px;font-size: 20px;line-height: 30px;
}
// output
.class {border: 1px solid black;margin-bottom: 1px;font-size: 0.625rem;font-size: 6.25vw;line-height: 0.9375rem;line-height: 9.375vw;
}

配置

viewportWidth：对应设计图的宽度，用于计算 vw。默认 750，指定 0 或 false 时禁用
rootValue：根字体大小，用于计算 rem。默认 75，指定 0 或 false 时禁用
unitPrecision：计算结果的精度，默认 5
minPixelValue：小于等于该值的 px 单位不作处理，默认 1

注意：该插件只会转换 px 单位。rootValue 一般建议设置成 viewportWidth / 10
的大小，将设计图分成10等分。由于浏览器有最小字体限制，如果设置得过小，页面可能跟预期不一致

如果要使用 rem 单位，需要自己通过 js 来动态计算根字体的大小。如果将设计图分成 10 等分计算，那么根字体的大小应该是 window.innerWidth / 10。

最后

如果你觉得对你有帮助，欢迎 star 和 issue

微信支付

Keywords
css rem pixel px vw view port postcss postcss-plugin

postcss-px2vw插件将px转vw、rem相关推荐

Vue 适配移动端使用 postcss-pxtorem lib-flexible 插件转px为vw rem
vue项目使用Vant框架Rem适配(postcss-pxtorem.lib-flexible )的安装使用 1.安装: 使用的是vue-cli+webpack,通过npm来安装的 npm i pos ...
vscode怎么自动将px转换成vw_基于react/vue移动端适配之px自动转rem、vw
作为一名前端开发,在做移动端适配时rem.vw是我们经常用到的单位,但是我们在实际开发过程中需要将设计稿上的px转换成rem,如果手动去计算,将是一个很耗时.费力的过程.这是就需要一个工具可以帮我们自 ...
一个CSS的px值转rem值的Sublime Text 3自动完成插件
一个CSS的px值转rem值的Sublime Text 3自动完成插件. 插件效果如下: 安装下载本项目,比如:git clone https://github.com/flashlizi/cssr ...
css之px自动转rem—sublime 插件CSSREM
CSSREM CSSREM 是一个CSS的 px 值转 rem 值的Sublime Text3自动完成插件.先来看看插件的效果: 一个CSS的px值转rem值的Sublime Text 3自动完成插件 ...
VUE中引入插件实现px转换rem
1.使用命令行安装lib-flexible: npm install lib-flexible --save 2.引入lib-flexible: 在项目入口文件 main.js 里引入 lib-fl ...
css自动转rem,css之px自动转rem—“懒人”必备
作为一名前端开发,尤其是在做移动端适配时,rem是我们经常用到的单位,它的好处大家可以自行搜索,网上已经有很多了. 但是我们再将设计稿上的px转换成rem时,得手动的去计算,这是一个很耗时.费力的过程 ...
移动端布局-px转vw、vh
移动端布局长度单位转换一.场景描述二.实现方式 1.安装 2.配置 3.其他配置三.多规则配置一.场景描述一般我们做移动端网页开发时,设计稿一般都是固定的宽高的(比如750*1334).但是 ...
cssrem转换工具_css之px自动转rem—“懒人”必备
作为一名前端开发,尤其是在做移动端适配时,rem是我们经常用到的单位,它的好处大家可以自行搜索,网上已经有很多了. 但是我们再将设计稿上的px转换成rem时,得手动的去计算,这是一个很耗时.费力的过程 ...
将已写好页面的px转化为rem（px to rem）
将已写好页面的px转化为rem(px to rem) 1.px/rem单位 px:pixel的缩写,像素的意思 rem : 是一个相对单位,1rem等于根元素的font-size值 2.为什么要实现p ...

postcss-px2vw插件将px转vw、rem

postcss-px2vw

安装

使用

举例：

配置

最后

postcss-px2vw插件将px转vw、rem相关推荐

最新文章

热门文章