css之px自动转rem—“懒人”必备
作为一名前端开发,尤其是在做移动端适配时,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文件:
按tab键,得到如下结果:
是不是很方便,快动手去尝试吧~
原文链接:http://www.jianshu.com/p/d0fe770b07ae
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
css之px自动转rem—“懒人”必备的更多相关文章
- 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 进行等比例计算的. 但是 ...
- vue换算单位px自动转换rem
cnpm i postcss-px2rem --save cnpm install px2rem-loader --save 2.配置px2rem build目录下vue-loader.conf.js ...
- 懒人必备:.NetCore快速搭建ELK分布式日志中心
该篇内容由个人博客点击跳转同步更新!转载请注明出处! 前言 ELK是什么 它是一个分布式日志解决方案,是Logstash.Elastaicsearch.Kibana的缩写,可用于从不同的服务中收集日志 ...
- MySQL 数据库的tab 补全功能 (懒人必备)
MySQL 数据库的tab补全功能 跟着步骤走~~ 懒人养成第一步 不仅帮你补全 甚至预判你的预判,就问你可怕不可怕 1.安装相关依赖软件(需要配置yum官方 ...
- 详细讲解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个小时:学习+开发+修改 遇到的小问题: 在自动化填写地图的 ...
随机推荐
- backup2
/// <summary> /// 先在窗体上添加LicenceControl控件 /// Enable 3D analysis /// </summary> public v ...
- ASP.NET 表单验证实现浅析
首先,自然是配置 Web.config,在 <system.web> 下设定: <authentication mode="Forms"> <form ...
- UNDO
UNDO及事物 undo表空间是Oracle独有,在oracle开启一个事物之后,oracle对数据进行修改,同时,会把修改前的数据保存到UNDO表空间的UNDO段里.undo表空间中会自动分配und ...
- iOS Safari 上加载的最大的图片尺寸
做WAP端项目时发现, 写css代码显示图片, 却显示不出.或用canvas 来加载图片的某一部分的时候显示不出, 代码如下: background: url() no-repeat -1000px ...
- linux 学习8 权限管理
第八章 权限管理 8.1 ACL权限 8.2 文件特殊权限 8.3 文件系统属性chattr权限 8.4 系统命令sudo权限 8.1 ACL权限 ACL权限简介与开启 查看与设定ACL权限 最大有效 ...
- Portable Basemap Server:多数据源多客户端的底图服务器
Portable Basemap Server:多数据源多客户端的底图服务器 [poll id=”1″]2014.3.8更新v3.1~在线切片转换为MBTiles时,增加RecreateEmptyCa ...
- 查询阻塞的sql
WITH ProcessCTE(blocked) AS ( SELECT blocked FROM sys.sysprocesses WHERE blocked>0 union SELECT s ...
- new和alloc的区别
简单来说,new和alloc在功能上基本没有什么区别,都是分配内存,初始化对象. 但是,调用new的话,只能通过默认的init方法来初始化对象,而alloc可以通过其他的初始化方法如:-(instan ...
- iOS 利用for循环创建九宫格
// 利用for循环创建九宫格 - (void)createScratchableLatex{ // 总列数 ; // 每一格的尺寸 CGFloat cellW = (self.frame.size. ...
- javascript 中的继承实现, call,apply,prototype,构造函数
javascript中继承可以通过call.apply.protoperty实现 1.call call的含义: foo.call(thisObject, args...) 表示函数foo调用的时候, ...