CSS3 中的 rem 值与 px 之间的换算
想给博客换个主题，到处找找不到满意的，最后发现默认主题 twentytwelve 越看越顺眼，于是就想动手改一下用。
看 CSS 文件的时候发现引入了一个新大小单位：rem，虽然 CSS 文件注释里有介绍，但看半天拿着手机上的计算器计算了几下愣是没搞明白，怕是新东西搜出来的都是英文看着累就没找 google，而是百度了一下，百度的结果就是看到一篇文章被转来转去，来转去，转去，去。。。
郁闷之下回到主题的 CSS 再看那介绍，打开电脑的计算器，一计算，居然被我整明白了，原来原先计算值不等是因为我手机的计算器设置了保留两位小数点的原因，真是囧。。。
其实 px 和 em 的关系我都没整明白，就来说这个 rem 让我觉得很忐忑的。。。
评论里有热心同学一句话解决了我上面 px 和 em 关系问题：
em 以父元素为参照
rem 和 em 一样，也是一个相对大小的值，它是相对于根元素 <html>，比如假设，我们设置 html 的字体大小的值为 html｛font-size: 87.5%;｝（也就是 14px，这是 twentytwelve 默认主题里的设置）。然后其他的字体就是将你要的值除以 14 得到的值；比如默认的twentytwelve主题大小是 960px；换算成 rem 就是 960/14=68.57142857142857rem（我这个用电脑的计算器计算的，比默认的更精确，嘿嘿）；padding 的 24px 也就是 24/14=1.714285714285714rem（当然还是比 css 文件里的精确），以此类推。
简单直白的说法，可以用评论里同学的一句话来表达：
如果你没有在根元素指定参照值，那浏览器默认就是 1rem 为 16px,如果你指定了值假设为 20px，那 1rem 就为 20px。
上面的 14 是个变量，相对于你对根元素 html 字体大小的设定，如果你设定的是 62.5%，那除数就变成 10 了，对照表如右图：
用这个 rem 单位的好处有啥我不知道，不过如果你根元素的字体大小选 62.5%，那 px 和 rem 之间的换算就是 px 直接除以 10 就得到 rem 了，这比 em 简单多了，到现在我都没搞清楚 em 和 px 之间是如何换算的。
另外 rem 在 ie8 及以下的版本不支持外其他浏览器都支持，如果你要考虑 ie8 及一下，可以像 twentytwelve 默认文件那样设置个 px 再设置个 rem 就可以了。
再另外，有许多朋友问我：为啥 html 设置成 62.5%，或者 10px 时，这种换算无效了呢？经过研究发现，不知道什么时候开始，小于 12px 或者 75% 的字体大小 rem 确实不支持这种换算，这可能与现在有些浏览器不支持 12px 以下的大小有关。所以，记住一点：如果要使用 rem 单位，html 的字体默认大小必须设置为 12px 或以上才行。
CSS3 中的 rem 值与 px 之间的换算的更多相关文章
- CSS3中的Rem值与Px之间的换算
bootstrap默认 html{font-size: 10px;} rem是一个相对大小的值,它相对于根元素<html>, 比如假设,我们设置html的字体大小的值为html{font- ...
- rem与px之间的换算（移动端）
最近因为工作接触到rem与px之间的换算,之前知道一些,不过还是比较笼统模糊,用起来不是很明白,后来自己查了点资料,以及亲自测试总算明白它们之间是怎么换算的了. rem是一个相对值,它相对于根元素ht ...
- CSS3中的rem单位
一.rem介绍 rem是什么? 它的全称是 font size of the root element (根元素的字体大小) 它是CSS3中新增加的一个尺寸(度量)单位,根节点(html)的font- ...
- css3中单位rem与.less结合布局
rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注.这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素. ...
- em与px之间的换算
任意浏览器的默认字体高度16px(16像素).所有未经调整的浏览器都符合:1em=16px.那么12px=0.75em,10px=0.625em.为了简化font-size的换算,需要在css中的bo ...
- em,pt和px之间的换算
任意浏览器的默认字体高度16px(16像素).所有未经调整的浏览器都符合: 1em=16px.那么12px=0.75em,10px=0.625em.为了简化font-size的换算,需要在css中的b ...
- 如何把设计稿中px值转化为想要的rem值
首先我们需要的是把尺寸转化为rem值 假如 设计稿中的是 200px*200px的图片 移动端的设计图尺寸一般是640*750; 第一步. 把图片分为若干份(好算即可),每一份的大小就是rem的单位 ...
- rem、em、px之间的转换
rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个参考值,这个参考值设置为多少,完全可以根据您自己的需求来定. 我们知道,浏览器默认的字号16px,来看一些px单位 ...
- css3中rem和em是干嘛的
css3中rem和em是干嘛的 一.总结 一句话总结:对rem综合评价是用来做web app它绝对是最合适的人选之一. 这里我特别强调web app,web page就不能使用rem吗,其实也当然可以 ...
随机推荐
- 论文笔记之：Hybrid computing using a neural network with dynamic external memory
Hybrid computing using a neural network with dynamic external memory Nature 2016 原文链接:http://www.na ...
- 使用dojoConfig配置dojo（翻译）
http://dojotoolkit.org/documentation/tutorials/1.10/dojo_config/index.html dojoConfig对象(原来是djConfig对 ...
- linux下生成rsa密钥的方法
首先生成密钥,用命令ssh-keygen –t rsa 运行后可以一直空格,生成密钥,id_rsa和id_rsa.pub文件 ,默认放在/root/.ssh/下,.ssh文件是隐藏的,要显示隐藏文件才 ...
- Linux-第一天
1.etc 配置目录 2.swap 3.挂载点 建立一个目录,作为一个设备的访问入口,光盘镜像文件.移动硬盘.U盘以及Windows网络共享和UNIX NFS网络共享等 mnt目录, 建立挂载点:mn ...
- 从头来之【图解针对虚拟机iOS开发环境搭建】
1.下载Mac OSX10.9. 点击下载 2.下载VMware Workstation 10,点击下载,网页中包含序列号.安装VM. 3.VM10-MacOS补丁.用于创建苹果虚拟机. 安装VM就不 ...
- 学习C++的第二天
1.输入 十六进制 cin>>hex>>x>>dec>>y dec 是十进制 oct 是八进制 输出 十六进制 cout<<h ...
- JSON库之性能比较：JSON.simple VS GSON VS Jackson VS JSONP
从http://www.open-open.com/lib/view/open1434377191317.html 转载 Java中哪个JSON库的解析速度是最快的? JSON已经成为当前服务器与WE ...
- 怎么取消 Windows Server 2012 r2 RDP 限制每个用户只能进行一个会话（转）
在 Windows Server 2008 / 2008 R2 上,如果希望多个远程用户使用同一个账号同时访问服务器的 Remote Desktop(RDP),只需通过管理工具-远程桌面下的“远程桌面 ...
- CGContextAddArcToPoint和CGContextAddArc
比较难的是CGContextAddArcToPoint 代码如下: CGContextRef context=UIGraphicsGetCurrentContext(); CGContextSetRG ...
- 使用gson解析，生成Json
包:gson-2.3.jarJson文本解析为Java对象:Java对象生成为Json文本 import com.google.gson.Gson; public class TestGson { c ...