最简单的px转rem预处理方法

Cristic 发布于2019-08-30 12:57 / 1678人阅读

摘要：如果你使用作为你的预处理的工具，那么是你使用最简单处理转工具，使用方法如此简单首先安装工具然后只要在你的文件引用就可以里工具将编译成并预处理将转换成上面内容输出为选择使用和设置初始值默认你可以设置它。

如果你使用 Stylus 作为你的预处理CSS的工具，那么 px2rem 是你使用最简单处理 px 转 rem 工具，stylus-px2rem 使用方法如此简单：

首先安装工具

npm install stylus-px2rem --save-dev

然后只要在你的index.styl 文件引用就可以里

@import "node_modules/stylus-px2rem"
div{ 
    margin 24px 24px
    font-size 14px
    padding-bottom 12px
    width 100px
    height 100%
}

Stylus 工具将index.styl 编译成 index.css 并预处理将px转换成 rem 上面内容输出为：

div{
    margin:1.5rem 1.5rem;
    font-size:.875rem;
    padding-bottom:.75rem;
    width:6.25rem;
    height:6.25rem
}

选择使用和设置初始值

默认html-font-size＝10px 你可以设置它。你可以设置部分样式转化，部分样式不转换成rem，你只需这么引用 styl 即可。这种方法 mixins 必须引用它

@import "stylus-px2rem/mixins"
@import "stylus-px2rem/font-size"
@import "stylus-px2rem/border"
@import "stylus-px2rem/margin"
@import "stylus-px2rem/padding"
@import "stylus-px2rem/width"
@import "stylus-px2rem/height"
@import "stylus-px2rem/line-height"

html-font-size = 10px;

div {
    margin 24px 24px
    font-size 14px
    padding-bottom 12px
    width 100px
    height 100%
}

在Gulp中使用

在gulpfile.js中建立任务

var gulp = require("gulp");
var stylus = require("gulp-stylus");
var px2rem = require("stylus-px2rem");
gulp.task("stylus",function(){
    gulp.src("./public/styl/*.styl")
        .pipe(stylus({
            use:[px2rem()],
            compress:true
        }))
        .pipe(gulp.dest("./public/css"));

})

在你的styl文件中引入

@import "stylus-px2rem"
.banner{
    height 140px
    font-size 24px
}

在npm script 中使用

配置你的package.json文件

{
  "scripts": {
    "build:css": "stylus -u autoprefixer-stylus -u stylus-px2rem css/index.styl -o css/ -c",
    "watch:css": "stylus -u autoprefixer-stylus -u stylus-px2rem -w "css/index.styl" -o css/ -c "
  },
  "dependencies": {
    "autoprefixer-stylus": "^0.9.2",
    "stylus": "^0.54.2",
    "stylus-px2rem": "^1.0.4"
  }
}

运行命令

$ npm run build:css
$ npm run watch:css

关注公众号

GPU云服务器云服务器 px2rem 的超简单方法[转] 大数据预处理的方法最简单的算法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115198.html

vue-cli 配置flexible

摘要：一般需用这个在后面添加会根据的不同，生成三套代码。如果明白了这些方法，就没必要再配置的了，因为下面的方法更容易控制外部引入的是否需要转，而更改就控制不了了，它会强制转换。能正常转换不能正常转换不能正常转换基于vue-cli配置手淘的lib-flexible + rem，实现移动端自适应没接触过flexible的建议先看看大漠的这篇文章这样你才会知道长度为什么用rem，而字体要用px...

caoym 2019-08-21 17:28 评论0 收藏0
webpack系列——实现一个行内样式px转vw的loader

摘要：但是，标签内的怎么办呢并不提供转换这个的功能。开始行动了解的实现原理写一个很简单，传入，干些坏事，干完之后，返回处理过的。对应的是每一个通过匹配到的文件。其实对应的就是这样一个文件，该例子中有是需要转换的目标，首先用正则把他们都找出来。需求自从有了postcss来处理css文件，我们可以快速进行网站适配的开发，只需要改改参数，样式按照设计稿的px写，webpack编译自动转换成re...

avwu 2019-08-29 16:43 评论0 收藏0
好用的px转rem插件推荐

摘要：然而在固定布局时我们通常以为基准单位进行调整，进而通过计算获取的值，这时如果有个好用的转工具会让工作事半功倍。启用此插件的文件类型。输入值后按下键直接转换，使用取消转换在响应式布局中，rem这个css单位已经慢慢崭露头角，成为最佳解决方案之一。然而在固定布局时我们通常以px为基准单位进行调整，进而通过计算获取rem的值，这时如果有个好用的px转rem工具会让工作事半功倍。本文将推荐一...

Clect 2019-08-30 14:20 评论0 收藏0