css之px自動轉rem

1.CSS處理器

Sass、LESS以及PostCSS這樣的處理器都可以處理。

@function px2rem($px, $base-font-size: 75px) {
  @return ($px / $base-font-size) * 1rem;
}

2.CSSREM

這是外掛程式是flashlizi為sublime text編寫的一個外掛程式，用起來真的很方便。我們可以在GitHub上看到。

下面我介紹一下，如何配置： 2.1 我們可以在GitHub上下載所依賴的檔案； 2.2 開啟Sublime Text，進入packages目錄（Sublime Text -> Preferences -> Browse Packages）； 2.3 將cssrem-master檔案夾放在上一步開啟的目錄中，重啟sublime text即可生效；

我們也可以修改預設配置：開啟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鍵，得到如下結果：

Sass、LESS以及PostCSS這樣的處理器都可以處理。 1.CSS處理器

Sass、LESS以及PostCSS這樣的處理器都可以處理。 1.CSS處理器

Sass、LESS以及PostCSS這樣的處理器都可以處理。