作为一名前端开发，尤其是在做移动端适配时，rem是我们经常用到的单位，它的好处大家可以自行搜索，网上已经有很多了。

但是我们再将设计稿上的px转换成rem时，得手动的去计算，这是一个很耗时、费力的过程，有没有什么办法可以“解放”我们呢？(原谅我的懒~)

1.CSS处理器

Sass、LESS以及PostCSS这样的处理器都可以处理。

Sass(使用Sass的函数、混合宏这些功能来实现):

@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;

}

Sass(使用Sass的混合宏):

@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这类的书写规则，也需要配置，虽然很简单，但是能不能更简单就更简单呢？

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键，得到如下结果：

22.png

是不是很方便，快动手去尝试吧~

文／webCoder(简书作者)

原文链接：http://www.jianshu.com/p/d0fe770b07ae

著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。

css之px自动转rem—sublime 插件CSSREM

CSSREM CSSREM 是一个CSS的 px 值转 rem 值的Sublime Text3自动完成插件.先来看看插件的效果: 一个CSS的px值转rem值的Sublime Text 3自动完成插件 ...

vue-cli 2.x和3.x配置移动端适配px自动转为rem

移动端适配一直都是个大问题,现在也出现了各种各样的解决方案,比如 rem, vw 百分比等,但是比较成熟的切比较容易编写的还是 rem,他是相对于根元素的 font-size 进行等比例计算的. 但是 ...

懒人必备：.NetCore快速搭建ELK分布式日志中心

该篇内容由个人博客点击跳转同步更新!转载请注明出处! 前言 ELK是什么 它是一个分布式日志解决方案,是Logstash.Elastaicsearch.Kibana的缩写,可用于从不同的服务中收集日志 ...

详细讲解css单位px,em和rem的含义以及它们之间的区别

一.首先介绍一下px px就是css中最基本的长度单位了,用px做单位基本上没什么问题,可以做到让页面按套路精确的展现! 可但是!但可是!如果全篇用px布局会暗藏一个蛋疼的问题,就是当用户和Ctrl滚 ...

px自动换算rem

//designWidth:设计稿的实际宽度值,需要根据实际设置//maxWidth:制作稿的最大宽度值,需要根据实际设置//这段js的最后面有两个参数记得要设置,一个为设计稿实际宽度,一个为制作稿最 ...

vue项目中px自动转换为rem

.安装 postcss-pxtorem : npm install postcss-pxtorem -D .修改 /build/utils.js 文件 找到 postcssLoader const p ...

UI自动化填写问卷(selenium)+定时任务(懒人必备)

1.自动填报 UI自动化 selenium 开发程序动机:天天有人催着填写问卷,弄的头大.主要还是懒的每天一个个去填写内容. 开发总时长:2个小时:学习+开发+修改 遇到的小问题: 在自动化填写地图的 ...

懒人必备，IntelliJ IDEA中代码一键生成

之前有不少小伙伴问松哥微人事项目(https://github.com/lenve/vhr)使用的 MyBatis 逆向工程在哪里?其实旧版微人事当时没有使用逆向工程,是我自己手动敲出来的,当然手动敲 ...

Android Studio “懒人”必备插件android layout id converter

在一个布局文件里.假设定义了非常多非常多id,代码中一个个findview是一件非常枯燥而且浪费时间的事情. 所以这里向大家推荐一个必备插件android layout id converter. 配 ...

随机推荐

iOS 统计App 的代码总行数

打开Terminal,cd 到项目的根目录下,输入以下命令 find . -name "*.m" -or -name "*.mm" -or -name &quo ...

MVC3缓存之一：使用页面缓存

MVC3缓存之一:使用页面缓存 在MVC3中要如果要启用页面缓存,在页面对应的Action前面加上一个OutputCache属性即可. 我们建一个Demo来测试一下,在此Demo中,在View的Hom ...

puppet 安装

yum源配置 1. wget http://ftp.kaist.ac.kr/fedora//epel/6/i386/epel-release-6-8.noarch.rpm 2. yum list | ...

zw版【转发·台湾nvp系列Delphi例程】HALCON CheckDifference

zw版[转发·台湾nvp系列Delphi例程]HALCON CheckDifference unit Unit1;interfaceuses Windows, Messages, SysUtils, ...

gpgcheck

warning: rpmts_HdrFromFdno: Header V3 RSA/SHA256 Signature, key ID fd431d51: NOKEY Public key for co ...

javascript之求最值

求最值: var selections = $("#deliveryGridSalesOrGoods").datagrid('getRows'); var costPrice = ...

学习ReactNative笔记整理一___JavaScript基础

学习ReactNative笔记整理一___JavaScript基础 ★★★笔记时间- 2017-1-9 ★★★ 前言: 现在跨平台是一个趋势,这样可以减少开发和维护的成本.第一次看是看的ReactNa ...

JAVA 发送邮件代码---发送HTML内容

依赖包:mail.jar JAR链接地址: http://pan.baidu.com/s/1o8LNl0Y 密码: ja52 package com.dava; import java.util.Pr ...

芝麻HTTP：分析Robots协议

利用urllib的robotparser模块,我们可以实现网站Robots协议的分析.本节中,我们来简单了解一下该模块的用法. 1. Robots协议 Robots协议也称作爬虫协议.机器人协议,它的 ...

将一个javaWeb应用跑在Docker里

安装docker,本实例使用的是CentOS 7,其他系统的安装请自行百度. 安装:yum -y install docker 启动:service docker start docker的一些基本命 ...