css之px自动转rem
来源:互联网 发布:别了司徒雷登 知乎 编辑:程序博客网 时间:2024/06/04 19:30
作为一名前端开发,尤其是在做移动端适配时,rem是我们经常用到的单位,它的好处大家可以自行搜索,网上已经有很多了。但是我们再将设计稿上的px转换成rem时,得手动的去计算,这是一个很耗时、费力的过程,有没有什么办法可以“解放”我们呢?
一、CSSREM
这是flashlizi为sublime text编写的一个插件,用起来真的很方便!
- 下载所依赖的文件,比如:git clone https://github.com/flashlizi/cssrem
- 打开Sublime Text,进入packages目录:Sublime Text -> Preferences -> Browse Packages
- 复制下载的cssrem目录到刚才的packges目录里。
- 重启Sublime Text。
这时可以在 .css, .sass, .less 文件中使用自动转换功能了,也可以修改默认配置:(打开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"]}
效果如下:
按tab键,自动转换,得到如下结果:
如果用手淘(即lib-flexible)的h5适配方案,则修改默认配置为:
{ "px_to_rem": 75, ... }
二、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语言的同学来说,还得去额外学习sass这类的书写规则,也需要配置,虽然很简单,建议使用第一种更简单的方式。
阅读全文
0 0
- css之px自动转rem
- css之px自动转rem
- css之px自动转rem—sublime 插件CSSREM
- CSS之 Px rm rem之区别
- Css rem和px
- css px em rem
- CSS-PX EM REM
- CSS的px,em,rem
- css中的px,em&rem
- px转rem工具
- px自动转rem的插件 适用于sublime
- hotcss.js如何利用sass自动生成css,快速让px转换成rem
- 谈谈css中px , em,及rem
- CSS中的单位px,em,rem
- CSS尺寸单位 % px em rem 详解
- 区别CSS单位中的px,em,rem
- CSS单位 px、em和rem
- css中的px、em、rem 详解
- 专心致志来创新,酒香也怕巷子深——锐捷
- Mac下为命令定义别名, 让使用体验与你使用Linux一致
- 管道符和作业控制、shell变量和环境变量配置文件
- jquery获得select option的值 和对select option的操作
- tomcat优化
- css之px自动转rem
- linux中的管道符与重定向
- Sublime Text 3
- idea的安装
- maven与eclipse的整合
- 选择器竟然有这么多!!!w(゚Д゚)w
- git中手动删除的文件如何在git中删除
- Android 8.0 应用快捷方式(ShortcutManager)的使用
- JAVA面试之集合框架(三)