最簡單的px轉rem預處理方法

Cristic 發布于2019-08-30 12:57 / 1710人閱讀

摘要：如果你使用作為你的預處理的工具，那么是你使用最簡單處理轉工具，使用方法如此簡單首先安裝工具然后只要在你的文件引用就可以里工具將編譯成并預處理將轉換成上面內容輸出為選擇使用和設置初始值默認你可以設置它。

如果你使用 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 的超簡單方法[轉] 大數據預處理的方法最簡單的算法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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