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键,得到如下结果:
是不是很方便,快动手去尝试吧~
最后,附上 微网站—使用flexible.js实现移动端设备适配 。
转载于:https://www.cnblogs.com/yangAL/p/6667546.html
css之px自动转rem—“懒人”必备相关推荐
- css自动转rem,css之px自动转rem—“懒人”必备
作为一名前端开发,尤其是在做移动端适配时,rem是我们经常用到的单位,它的好处大家可以自行搜索,网上已经有很多了. 但是我们再将设计稿上的px转换成rem时,得手动的去计算,这是一个很耗时.费力的过程 ...
- cssrem转换工具_css之px自动转rem—“懒人”必备
作为一名前端开发,尤其是在做移动端适配时,rem是我们经常用到的单位,它的好处大家可以自行搜索,网上已经有很多了. 但是我们再将设计稿上的px转换成rem时,得手动的去计算,这是一个很耗时.费力的过程 ...
- css之px自动转rem—sublime 插件CSSREM
CSSREM CSSREM 是一个CSS的 px 值转 rem 值的Sublime Text3自动完成插件.先来看看插件的效果: 一个CSS的px值转rem值的Sublime Text 3自动完成插件 ...
- css之px自动转rem
1.CSS处理器 Sass.LESS以及PostCSS这样的处理器都可以处理. @function px2rem($px, $base-font-size: 75px) { @return ($p ...
- idea package自动生成_懒人必备,IntelliJ IDEA中代码一键生成
之前有不少小伙伴问松哥微人事项目(https://github.com/lenve/vhr)使用的 MyBatis 逆向工程在哪里?其实旧版微人事当时没有使用逆向工程,是我自己手动敲出来的,当然手动敲 ...
- 一个CSS的px值转rem值的Sublime Text 3自动完成插件
一个CSS的px值转rem值的Sublime Text 3自动完成插件. 插件效果如下: 安装 下载本项目,比如:git clone https://github.com/flashlizi/cssr ...
- irobot擦地机器人故障_懒人必备神器,电动高频擦地,科沃斯地宝T8 AIVI扫地机器人...
虽说一屋不扫,何以扫天下,但扫地真的累,本来一天回到家就很累了,扫地拖地就需要半个小时,有时候床底桌底还清理不到,周末还要时不时的来一次全方位的大扫除,本来就难得的休息时间就浪费在了扫地拖地上了.好在 ...
- 懒人必备 自动识别语音给视频添加字幕
在这样一个每个人都可以制作视频的时代. 日常Vlog主,视频博主们在剪辑视频中碰到最苦逼的事莫过于给视频加字幕. 对此很是"深恶痛绝",拍摄30分钟,加字幕两小时,简单枯燥耗时耗力 ...
- 懒人必备,自动识别语音给视频添加字幕
在这样一个每个人都可以制作视频的时代. 日常Vlog主,视频博主们在剪辑视频中碰到最苦逼的事莫过于给视频加字幕. 对此很是"深恶痛绝",拍摄30分钟,加字幕两小时,简单枯燥耗时耗力 ...
- 懒人必备公式快速插入word(latexocr+TyporaMathtype)保姆集教程
懒人必备公式快速插入word(latexocr+Typora/Mathtype)保姆集教程 演示 (有编程基础的,直接看Latexocr怎么获取就可以,其他你肯定搞得定) 1.点击Snip(或者快捷键 ...
最新文章
- 15.基于Hadoop的数据仓库Hive第3部分(Hive编程实践)
- windows部署Apollo
- EasyUI怎么利用onBeforeRender事件
- 在Visual Studio中一次运行两个项目
- HDU 6191 2017广西邀请赛:Query on A Tree(字典树启发式合并)
- [转]android sqlite db-journal文件产生原因及说明
- 坑爹的libxml2 for mingw 编译
- 分解原理_原理篇 | 推荐系统之矩阵分解模型
- 机器学习不是你想用,想用就能用
- Teamspeak3集成要注意的问题
- python官网怎么下载python,苹果电脑怎么下载python
- 2023年最新最全 VSCode 插件推荐
- 企业青睐什么样的产品经理
- 和互联网公司服务器有关的一些情况
- Java:获取字符串长度(length())
- 虚拟机上网的三种方式
- java m老师小讲堂——画板
- 牛客小白月赛25 C.白魔法师
- oracle中修改用户密码
- ckplayer 网页视频播放
热门文章
- log4j.xml按照日期生成_荐读 | 进项发票快速生成凭证!这个功能太方便了!
- html里面布局的优劣,HTML与CSS布局技巧总结
- php 编译 sass,如何在Symfony 3中使用纯PHP编译SASS(scss)
- TSAP(1) : DateTimes
- 阿里云云计算 34 RDS的概念
- 阿里云云计算 29 AS的原理
- 翻译:Swift中的Operations和OperationQueues入门
- 算法:Invert Binary Tree(翻转二叉树)
- this conn php,测试connect.php文件出现问题
- 2021-08-24XLNET 语言模型