今天在群里无意中看到了群友分享的一篇关于移动端的文章。里面其他内容我倒不大感兴趣,反而是rem让我提起了兴趣。

  首先来谈一下rem,rem是CSS3中新增加的一个单位值,它和em单位一样,都是一个相对单位。所不同的是,em是相对于元素的父元素的font-size进行计算;而rem是相对于根元素html的font-size来计算的。这样一来,rem就绕开了复杂的层级关系,实现了与em类似的功能。

  1、sublime text2中安装REM-PX插件来实现px与rem间的互换。

    package control组件安装。

    1.1按ctrl+` 调出console

    1.2粘贴以下代码到底部命令行并回车:

    import urllib2,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

    1.3. 重启Sublime Text 2。

    1.4. 如果在Perferences->package settings中看到package control这一项,则安装成功。

  如果这种方法不能安装成功,可以到这里下载文件手动安装

 用Package Control安装插件的方法:

  1. 按下Ctrl+Shift+P调出命令面板
  2. 输入install 调出 Install Package 选项并回车,然后在列表中选中要安装的插件。

  这里选择的是REM-PXC插件,安装完后,重启sublime text就行了。

  你可以通过PreFerences>Browser Packages下面的REM PX文件夹来查看相关的配置文件或修改配置文件,这里我先来说一下这个文件

  

  该文件中默认16px表示1rem,即要将以px为单位的值转换为以rem为单位时,是直接除以16来计算的。这里具体得看你的根元素即html的font-size值是多少,你就将这个值设置多少即可。

  这三个文件则是说明如何使用。

  

  例如,要将以px为单位的值转换为以rem为单位的时候,只需选中该值(注意:连同单位一起选中),然后时候Ctrl+shift+r即可转换成以rem为单位的值,

  同理,如需将以rem为单位的值转换为以px为单位的值时,只需选中该值(注意:连同单位一起选中),然后使用Ctrl+shift+x即可转换成以px为单位的值了。

  

  2、在sublime text3中安装CSSREM插件来实现px转换为rem

  具体实现看这里

  这里我要说的一点是px转换为rem的单位比例,该插件中默认单位比例是40,即表示40px相当于1rem,而我们浏览器一般默认html的font-size为16px,而我们也习惯性的将html的fong-size值设置为62.5%(即10/16*100%)即10px,这样的话,在转换的时候就比较好转换了,直接将以px为单位的值除以10即可。因此我们在具体的实现时得看一下你html元素的font-size是多少,你便可以将转换的单位比例改为多少。具体情况具体分析啦。

Sublime Text中安装插件来实现px与rem间的换算的更多相关文章

  1. 解决sublime text无法安装插件问题

    解决sublime text无法安装插件问题最近在sublime text3中使用命令ctrl+shift+p命令安装插件发现不能安装了,一会儿报错 这个错误表示没有可用的安装包,经过一番探索发现是配 ...

  2. sublime Text不能安装插件的解决办法

    我的sublime Text不能安装插件,提示如下错误 解决办法如下: 1.点击Preferences > Browse Packages菜单 2.进入打开的目录的“上层目录”,然后再进入Ins ...

  3. Sublime Text 3安装插件(Mac 10.12)

    1.先安装Package Control,默认这个是没有安装的. 使用[control + -]打开控制台,输入以下代码: import urllib.request,os; pf = 'Packag ...

  4. 在SUBLIME TEXT中安装SUBLIMELINTER进行JS&CSS代码校验

    一:Sublime Text 中需要先安装Package Control.(如果有则无需安装) 安装方法:打开Sublime Text控制台(快捷键Ctrl+`),在控制台粘贴以下代码,按回车执行. ...

  5. Sublime Text 3 安装插件与快捷键总结

    ublime Text 3 是一个了不起的软件.首先,它是一个干净,实用,可以快速的编写代码编辑器.它不仅具有令人难以置信的内置功能(多行编辑和VIM模式),而且还支持插件,代码片段和其他许多东西.很 ...

  6. Sublime Text 3安装插件指南

    Sublime Text已经很用得很广泛,一般普通的功能已经够用,加入一些插件能些许加快开发. 安装 Package Control 有了插件控制器Package Control安装起来就很轻松了. ...

  7. sublime text下安装插件autoprefixer

    有时候在写css样式的时候,分不清哪些属性需要前缀,哪些不需要,总是爱搞混淆了,于是autoprefixer这款插件便应运而生了.虽然在使用webpack的时候,我们可以很方便的使用这个,但是,如果项 ...

  8. Sublime Text 3 安装插件管理 Package Control

    自动安装: 1.通过快捷键 ctrl+` 或者 View > Show Console 菜单打开控制台 2.粘贴对应版本的代码后回车安装 适用于 Sublime Text 3: import   ...

  9. Ubuntu安装 Sublime Text 及常用插件推荐

    之前一直在用 Code Blocks 这个IDE工具,可用着还是感觉不怎么好,于是在网上找到了一篇文章,上面介绍了不少IDE,我找到了Sublime Text 感觉挺不错的. 帖子地址: http:/ ...

随机推荐

  1. 看过WWDC2017的闲谈

    2017年6月6日凌晨的138分钟,是属于WWDC2017的. 鉴于时间问题,没有熬夜看,所以早上起来趁着公司不太忙就看了看.整体的内容没有太多变化,依然是苹果的主产品,不过这次的one more t ...

  2. canvas实现视频截图

    截取视频当前播放画面,直接上源码. <body> <div class="container"> <video id="test" ...

  3. blog界面自己写了css,参考了网站设计,想要的自己拿

    junhey这就把界面的代码公布下来,可以自己修改额~(ps:麻烦加个友链http://www.cnblogs.com/junhey/ 谢谢) /* 初始化样式 */ html, body, div, ...

  4. Windows7 安装完成mysql dos启动服务出现服务名称无效

    错误提示:  WIN 7 cmd命令行下,net start mysql,出现 服务名无效提示: 错误分析: Mysql服务未安装 解决方案:在mysql 安装目录下bin文件夹  安装Shift+鼠 ...

  5. 简单两步快速学会使用Mybatis-Generator自动生成entity实体、dao接口和简单mapper映射(用mysql和oracle举例)

    前言: mybatis-generator是根据配置文件中我们配置的数据库连接参数自动连接到数据库并根据对应的数据库表自动的生成与之对应mapper映射(比如增删改查,选择性增删改查等等简单语句)文件 ...

  6. nginx反向代理cas-server之2:生成证书,centOS下使用openssl生成CA证书(根证书、server证书、client证书)

    前些天搭好了cas系统,这几天一致再搞nginx和cas的反向代理,一直不成功,但是走http还是测试通过的,最终确定是ssl认证证书这一块的问题,原本我在cas服务端里的tomcat已经配置了证书, ...

  7. AS3批量替换文件

    在做项目时,经过会遇到资源替换问题.比如配音公司,提供了一批八九百个配音MP3文件,用到后面却发现有些配音不能正常使用.可能是十几个,也可能是一两百个.只能是配音公司重新提供.因为之前的配音资源,已经 ...

  8. 摘抄自知乎的redis相关

    1.知乎日报的基础数据和统计信息是用 Redis 存储的,这使得请求的平均响应时间能在 10ms 以下.其他数据仍然需要存放在另外的地方,其实完全用 Redis 也是可行的,主要的考量是内存占用.就使 ...

  9. docker 汇总

    整理中 ... 一. docker 基础 配置参数最佳实践 二. docker 编排工具 docker swarm mesos kubernetes AWS ECS 三. docker 生态 dock ...

  10. [USACO08JAN]手机网络Cell Phone Network

    [USACO08JAN]手机网络Cell Phone Network 题目描述 Farmer John has decided to give each of his cows a cell phon ...