作為一名前端開發，尤其是在做行動端適配時，rem是我們常用到的單位，它的好處大家可以自行搜尋，網路上已經有很多了。
但是我們再將設計稿上的px轉換成rem時，得手動的去計算，這是一個很耗時、費力的過程，有沒有什麼辦法可以「解放」我們呢？ （原諒我的懶~）
Sass、LESS以及PostCSS這樣的處理器都可以處理。
@function px2em($px, $base-font-size: 16px) {
@if (unitless($px)) {
@warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
@return px2em($px + 0px); // That may fail.
} @else if (unit($px) == em) {
@return $px;
}
@return ($px / $base-font-size) * 1em;
}@mixin px2rem($property,$px-values,$baseline-px:16px,$support-for-ie:false){
//Conver the baseline into rems
$baseline-rem: $baseline-px / 1rem * 1;
//Print the first line in pixel values
@if $support-for-ie {
#{$property}: $px-values;
}
//if there is only one (numeric) value, return the property/value line for it.
@if type-of($px-values) == "number"{
#{$property}: $px-values / $baseline-rem;
}
@else {
//Create an empty list that we can dump values into
$rem-values:();
@each $value in $px-values{
// If the value is zero or not a number, return it
@if $value == 0 or type-of($value) != "number"{
$rem-values: append($rem-values, $value / $baseline-rem);
}
}
// Return the property and its list of converted values
#{$property}: $rem-values;
}
}上面的方法，我們還得去額外學習sass這類的書寫規則，也需要配置，雖然很簡單，但是能不能更簡單就更簡單呢？
這是插件是flashlizi為sublime text寫的一個插件，用起來真的很方便！我們可以在GitHub上看到。
下面我介紹一下，如何設定：
我们也可以修改默认配置：
打开cssrem-master文件夹下的cssrem.sublime-settings文件，进行修改
{
"px_to_rem": 40, //px转rem的单位比例，默认为40
"max_rem_fraction_length": 6, //px转rem的小数部分的最大长度。默认为6。
"available_file_types": [".css", ".less", ".sass",".html"]
//启用此插件的文件类型。默认为：[".css", ".less", ".sass"]
}實際測試：
新建一個.css檔：
11.png
按tab鍵，得到下列結果：
22.png
#是不是很方便，快動手去嘗試吧~
#最後,附上微網站—使用flexible.js實現行動端設備適配。
以上是css之px自動轉rem的詳細內容。更多資訊請關注PHP中文網其他相關文章！
