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这样的处理器都可以处理。