rem和em，px的使用
rem是CSS3中新增加的一个单位值，他和em单位一样，都是一个相对单位。不同的是em是相对于元素的父元素的font-size进行计算；rem是相对于根元素html的font-size进行计算。这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。
Rem的使用
前面说了em是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，在我们多次使用时，就会带来无法预知的错误风险。而rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值，这个参考值设置为多少，完全可以根据您自己的需求来定。
假设就使用浏览器默认的字号16px，来看一些px单位与rem之间的转换关系：
| px | rem |
------------------------
| 12 | 12/16 = .75 |
| 14 | 14/16 = .875 |
| 16 | 16/16 = 1 |
| 18 | 18/16 = 1.125 |
| 20 | 20/16 = 1.25 |
| 24 | 24/16 = 1.5 |
| 30 | 30/16 = 1.875 |
| 36 | 36/16 = 2.25 |
| 42 | 42/16 = 2.625 |
| 48 | 48/16 = 3 |
-------------------------
如果你要设置一个不同的值，那么需要在根元素<html>中定义，为了方便计算，时常将在<html>元素中设置font-size值为62.5%:
- <code class="css" style="display:block; overflow-x:auto; font-family:consolas; padding:0.5em"><span class="tag" style="color:rgb(133,153,0)">html</span> <span class="rules"><span class="rules">{
- <span class="rule"><span class="attribute" style="color:rgb(181,137,0)"><span class="rule"><span class="attribute">font-size</span></span></span><span class="rule">:<span class="value"><span class="value"> <span class="number" style="color:rgb(42,161,152)"><span class="number">62.5</span></span>%;</span></span></span><span class="value"></span></span> <span class="comment" style="margin-bottom:0px!important; display:inline!important; vertical-align:top; color:rgb(88,110,117); font-style:italic"><span class="comment" style="vertical-align:top; margin-bottom:0px!important; display:inline!important">/* 10 ÷ 16 × 100% = 62.5% */</span></span>
- <span class="rule"><span class="rule">}</span></span></span><span class="rule"></span></span>
- </code>
相当于在<html>中设置font-size为10px，此时，上面示例中所示的值将会改变：
| px | rem |
-------------------------
| 12 | 12/10 = 1.2 |
| 14 | 14/10 = 1.4 |
| 16 | 16/10 = 1.6 |
| 18 | 18/10 = 1.8 |
| 20 | 20/10 = 2.0 |
| 24 | 24/10 = 2.4 |
| 30 | 30/10 = 3.0 |
| 36 | 36/10 = 3.6 |
| 42 | 42/10 = 4.2 |
| 48 | 48/10 = 4.8 |
-------------------------
由于rem是CSS3中的一个属性，很多人首先关注的就是浏览器对他的支持度，我截了一张caniuse对rem属性的兼容表：
从上图可以清楚的知道，rem在众多浏览器中都已得到很好的支持，如果您的项目不用考虑IE低版本的话，你就可以放心的使用了，如果您的项目在IE低版本中还占有不少的比例，那么你还在担心使用rem不能兼容，而不敢使用。其实是没有必要的，可以针对低版本的IE浏览器做一定的处理：
- <code class="css" style="display:block; overflow-x:auto; font-family:consolas; padding:0.5em"><span class="tag" style="color:rgb(133,153,0)">html</span> <span class="rules"><span class="rules">{ <span class="rule"><span class="attribute" style="color:rgb(181,137,0)"><span class="rule"><span class="attribute">font-size</span></span></span><span class="rule">:<span class="value"><span class="value"> <span class="number" style="color:rgb(42,161,152)"><span class="number">62.5</span></span>%;</span></span></span><span class="value"></span></span> <span class="rule"><span class="rule">}</span></span></span><span class="rule"></span></span>
- <span class="tag" style="color:rgb(133,153,0)">body</span> <span class="rules"><span class="rules">{ <span class="rule"><span class="attribute" style="color:rgb(181,137,0)"><span class="rule"><span class="attribute">font-size</span></span></span><span class="rule">:<span class="value"><span class="value"> <span class="number" style="color:rgb(42,161,152)"><span class="number">14</span></span>px;</span></span></span><span class="value"></span></span> <span class="rule"><span class="attribute" style="color:rgb(181,137,0)"><span class="rule"><span class="attribute">font-size</span></span></span><span class="rule">:<span class="value"><span class="value"> <span class="number" style="color:rgb(42,161,152)"><span class="number">1.4</span></span>rem;</span></span></span><span class="value"></span></span> <span class="rule"><span class="rule">}</span></span></span><span class="rule"></span></span> <span class="comment" style="margin-bottom:0px!important; display:inline!important; vertical-align:top; color:rgb(88,110,117); font-style:italic"><span class="comment" style="vertical-align:top; margin-bottom:0px!important; display:inline!important">/* =14px */</span></span>
- <span class="tag" style="color:rgb(133,153,0)">h1</span> <span class="rules"><span class="rules">{ <span class="rule"><span class="attribute" style="color:rgb(181,137,0)"><span class="rule"><span class="attribute">font-size</span></span></span><span class="rule">:<span class="value"><span class="value"> <span class="number" style="color:rgb(42,161,152)"><span class="number">24</span></span>px;</span></span></span><span class="value"></span></span> <span class="rule"><span class="attribute" style="color:rgb(181,137,0)"><span class="rule"><span class="attribute">font-size</span></span></span><span class="rule">:<span class="value"><span class="value"> <span class="number" style="color:rgb(42,161,152)"><span class="number">2.4</span></span>rem;</span></span></span><span class="value"></span></span> <span class="rule"><span class="rule">}</span></span></span><span class="rule"></span></span> <span class="comment" style="margin-bottom:0px!important; display:inline!important; vertical-align:top; color:rgb(88,110,117); font-style:italic"><span class="comment" style="vertical-align:top; margin-bottom:0px!important; display:inline!important">/* =24px */</span></span>
- </code>
这样一来解决了IE低版本的不能兼容的问题，但生出另一个不足地方，就是增加了代码量。必竟鱼和熊掌很多时候不能兼得嘛。
rem和em，px的使用的更多相关文章
- rem、em、px的区别
px 像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. 特点: 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或re ...
- 浅谈rem、em、px
1.px:像素(Pixel) px是相对长度单位,他是相对于显示器屏幕分辨率而言的 优点:比较稳定.精确 缺点:在浏览器 中放大或者缩小浏览页面,会出现页面混乱的情况. 如下例子: .buttonPX ...
- rem和em和px vh vw和% 移动端长度单位
1.rem和em.px 首先来说说em和px的关系 em是指字体高度 浏览器默认1em=16px,所以0.75em=12px;我们经常会在页面上看到根元素写的font-size:65%; 这样em就成 ...
- 从理解开始 谈谈px rem 和 em 的区别与联系
概述 古语有云,没有规矩则不成方圆.秦灭六国之后为了促进国内生产力的发展,也是大力推进全国度量衡的统一.车同轨,书同文.与"尺寸"相关的问题(手动滑稽),从古至今一直为人们所关注. ...
- 网站响应式布局/网站自适应问题+rem、em、px、pt及网站字体大小设配
Bootstrap 网格系统: Bootstrap CSS: Bootstrap 组件及插件: 一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个 ...
- rem、em、px之间的转换
rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个参考值,这个参考值设置为多少,完全可以根据您自己的需求来定. 我们知道,浏览器默认的字号16px,来看一些px单位 ...
- mobile css & rem & em & px
mobile css & rem & em & px 1 rem === 16px 任意浏览器的默认字体高都是 16px, 所有未经调整的浏览器都符合: 1em=16px, 那 ...
- px，rem，em 通过媒体查询统一的代码
@media only screen and (max-width: 1080px), only screen and (max-device-width:1080px) { html,body { ...
- CSS3 中的 rem 值与 px 之间的换算
想给博客换个主题,到处找找不到满意的,最后发现默认主题 twentytwelve 越看越顺眼,于是就想动手改一下用. 看 CSS 文件的时候发现引入了一个新大小单位:rem,虽然 CSS 文件注释里有 ...
- rem与em
最近有朋友在进行rem布局的时候总搞不懂rem em px 与百分比布局的区别在哪里 这里简单给大家介绍一下 Em为单位: 这种技术需要一个参考点,一般都是以<body>的&quo ...
随机推荐
- NOIp模拟赛 旅游
很神奇的一道题,金策大爷给的题解: 什么叫神犇什么叫蒟蒻? IOI冠军的一句基本相同让我思考了一下午. 看完了题解我就想都没想开始用遍历二分图搞,但是搞到了65分后就总是会WA掉7组. 然后仔细的看了 ...
- 通过rsync搭建一个远程备份系统（二）
Rsync+inotify实时备份数据 rsync在同步数据的时候,需要扫描所有文件后进行对比,然后进行差量传输,如果文件达到了百万或者千万级别以上是,扫描文件的时间也很长,而如果只有少量的文件变更了 ...
- python运维开发坎坷之路-01
前言 2014年9月,新疆乌鲁木齐,在51CTO学院看着alex老师的python教学视频,不得不说这是我第一次接触python这门高级语言,从最开始的一无所知到现在能够用python写脚本,再到未来 ...
- ASP.NET程序单客户端（浏览器）登录的实现方案
需求描述:当用户的账户在另一个浏览器中登录的时候,需要把当前浏览器的登录强制下线.这种需求在业务系统,或付费视频服务网站中比较常见. 这种需求我称之为"单客户端(浏览器)"登录,与 ...
- wamp环境PHP安装mongodb扩展
特别注意 :本地的下载的mongo 为线性TS *86 而不是64 按照apache的版本来定.
- 自然语言20_The corpora with NLTK
QQ:231469242 欢迎喜欢nltk朋友交流 https://www.pythonprogramming.net/nltk-corpus-corpora-tutorial/?completed= ...
- 使用ASP.NET Web Api构建基于REST风格的服务实战系列教程【七】——实现资源的分页
系列导航地址http://www.cnblogs.com/fzrain/p/3490137.html 前言 这篇文章我们将使用不同的方式实现手动分页(关于高端大气上档次的OData本文暂不涉及,但有可 ...
- STL vector用法介绍
STL vector用法介绍 介绍 这篇文章的目的是为了介绍std::vector,如何恰当地使用它们的成员函数等操作.本文中还讨论了条件函数和函数指针在迭代算法中使用,如在remove_if()和f ...
- ecshop如何判断缓存文件是否能更新
1.打开temp->static_caches文件夹 2.点击后台“清楚缓存” 3.看static_caches文件夹里是否有文件删除 删除->可以更新缓存 否-> 不能更新缓存
- RabbitMQ安装后不能运行 Error: unable to connect to node nodedown
本地安装RabbitMQ后总是不能正常的使用.. 命令行输入 rabbitMQctl Status 报下边的错 Error: unable to connect to node 'rabbit@YO ...