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">html {
font-size: 62.5%; /* 10 ÷ 16 × 100% = 62.5% */
}
</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">html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */
</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 ...

随机推荐

CloseHandle(IntPtr handle)抛异常
[DllImport("Kernel32.dll", CharSet = CharSet.Auto, SetLastError = true)] public static ext ...
Beta版本冲刺第二天 12.6
一.站立式会议照片: 二.项目燃尽图: 三.项目进展: 成员昨天完成任务今天完成任务第三天冲刺要做任务问题困难心得体会胡泽善完成了"记住密码"的的逻辑以及BUG修改 ...
深入理解javascript中执行环境（作用域）与作用域链
深入理解javascript中执行环境(作用域)与作用域链相信很多初学者对与javascript中的执行环境与作用域链不能很好的理解,这里,我会按照自己的理解同大家一起分享. 一般情况下,我们把执行 ...
DNS部署（centos 6）
DNS部署(主从) 安装环境:CentOS 6.8 准备两台主机:192.168.137.13(主DNS).192.168.137.14(从DNS) EPEL仓库使用阿里源 rpm -ivh http ...
Android之Proguard语法
-include {filename} 从给定的文件中读取配置参数 -basedirectory {directoryname} 指定基础目录为以后相对的档案名称 -injars {class_pat ...
MFC学习-第4课消息机制和MFC作图
转自: 1.http://blog.sina.com.cn/s/blog_6b5180bf01012kbz.html 2.http://blog.csdn.net/happyhhb/article/d ...
原创最简单的ORM例子
这个仅是为了培训做的一个小例子 public class DB { public static string GetClassName(Type type) { if (type == nul ...
Java——标签组件：JLabel
使用一个标签 import java.awt.Color; import java.awt.Dimension; import java.awt.Point; import javax.swing.J ...
C++学习之Pair
C++学习之Pair Pair类型概述 pair是一种模板类型,其中包含两个数据值,两个数据的类型可以不同,基本的定义如下: pair<int, string> a; 表示a中有两个类型, ...
IOS: 账号，证书好文整理
公钥.私钥.数字证书的概念 http://blog.csdn.net/turui/article/details/2048582 iOS Provisioning Profile(Certificat ...

rem和em，px的使用

Rem的使用

rem和em，px的使用的更多相关文章

随机推荐

热门专题