今天在群里无意中看到了群友分享的一篇关于移动端的文章。里面其他内容我倒不大感兴趣,反而是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. sparklyr包:实现Spark与R的接口

    日前,Rstudio公司发布了sparklyr包.该包具有以下几个功能: 实现R与Spark的连接—sparklyr包提供了一个完整的dplyr后端 筛选并聚合Spark数据集,接着在R中实现分析与可 ...

  2. 06.04 html

    域名跟ip地址是绑定的看某个网站的ip地址 可以ping网址知道ip地址   最终访问的都是ip地址  每个ip地址都对应了一个空间(一块区域 要用来存储内容)网页访问的原理: 客户端电脑发动请求到服 ...

  3. 《物联网框架ServerSuperIO教程》-20.网络通讯控制器分组,提高交互的负载平衡能力。v3.6.6 版本发布

    20.1     概述 ServerSuperIO原来在网络通讯模式下,只有一个网络控制器,在自控模式.并发模式和单例模式下时都是异步处理返回的数据,并不会出现性能问题.但是在轮询模式下,一个网络控制 ...

  4. js 排序:sort()方法、冒泡排序、二分法排序。

    js中的排序,这里介绍三种,sort()方法.冒泡排序.二分法排序. 1.sort方法 写法:  数组.sort(); 返回排好序的数组,如果数组里是数字,则由小到大,如果是字符串,就按照第一个字符的 ...

  5. winfrom DataSet和实体类的相互转换

    最近做WInfrom项目,对表格和控件的数据绑定非常喜欢用实体类对象来解决,但是绑定以后 又怎么从控件中拿到实体类或者转换为datatable 或者dataset呢 经过在网上的搜索以及自己的改进 完 ...

  6. EntityFramework Core映射关系详解

    前言 Hello,开始回归开始每周更新一到两篇博客,本节我们回归下EF Core基础,来讲述EF Core中到底是如何映射的,废话少说,我们开始. One-Many Relationship(一对多关 ...

  7. 【收藏】socket 中的 recv与send函数

    收藏自世道:http://www.cnblogs.com/jianqiang2010/archive/2010/08/20/1804598.html 1.send 函数 int send( SOCKE ...

  8. asp.net core中负载均衡场景下http重定向https的问题

    上周欣喜地发现,微软官方终于针对 asp.net core 在使用负载均衡的情况下从 http 强制重定向至 https 的问题提供了解决方法. app.UseForwardedHeaders(new ...

  9. .net 4.0 中的特性总结(五):并行编程

    1.任务并行库 从 .NET Framework 4 开始,TPL 是编写多线程代码和并行代码的首选方法. 但是,并不是所有代码都适合并行化:例如,如果某个循环在每次迭代时只执行少量工作,或它在很多次 ...

  10. Java基础知识整理(一)

    Java开发环境JDK(Java编辑器.Java运行工具(JRE作用).Java文档生成工具.Java打包工具) 1.Java是严格区分大小写的.2.Java程序中一句连续的字符串不能分开在两行书写, ...