摘要:但问题是究竟该用还是呢关于这个问题一直存在比较大的争议。上述现象的出现,是因为是相对于当前元素字体的大小。什么是表示,它是相对于根元素的长度单位。还是在项目开发中究竟是选用还是一直以来争议不断。这就是前述规则中的第一条规则。
简言
应用象EM 和 REM这种相对长度单位进行页面排版是WEB开发中的最佳实践。在页面排版中较好应用EM 和 REM,根据设备尺寸缩放显示元素的大小。这就使得组件在不同设备上都达到最佳的显示效果成为可能。
但问题是究竟该用 EM 还是 REM 呢?关于这个问题一直存在比较大的争议。本文将会给大家介绍究竟什么是 EM 和 REM 和如何进行两者的选择,以及结合两者优势构建模块化的WEB组件。
注:本文内容简单,只面向初级开发人员,约2500字,阅读时间5分钟。
1 什么是EM?em 是相对长度单位。它相对于当前元素字体尺寸,即font-size。举例来说,如果当前元素的字体是20px,那么当前元素中的1em就等于20px。
h1 { font-size: 20px } /* 1em = 20px */ p { font-size: 16px } /* 1em = 16px */
实际开发中,用相对长度单位(如 em)表示字体大小是WEB开发中的最佳实践。
考虑下面的代码:
h1 { font-size: 2em }
这里的h1元素字体大小究竟是多少呢?
这时,我们需要根据父元素字体的大小,来计算字体的尺寸大小。如果父元素是,而且的字体大小是16px。就可以计算出的字体大小是32px,即2*16px。
用代码表示如下:
html { font-size: 16px } h1 { font-size: 2em } /* 16px * 2 = 32px */
设置字体的大小一般来说都不是一个好主意,因为这样重写了用户浏览器的默认设置。相反,可以使用百分比值或者根本不声明字体大小。
html { font-size: 100% } /* 缺省 16px */
对于大多数用户或浏览器,字体缺省大小是16px(未做浏览器缺省字体尺寸设置)。
em 还能用来指定除字体大小外的其它属性,象margin或padding等属性都可以用em来表示。
考虑下面的代码, 对于和
元素,margin-bottom值应该是多少? (假设的字号被设置为100%)。
h1 { font-size: 2em; /* 1em = 16px */ margin-bottom: 1em; /* 1em = 32px */ } p { font-size: 1em; /* 1em = 16px */ margin-bottom: 1em; /* 1em = 16px */ }
上述和
的margin-bottom都是1em,但是外边距结果值却不相同。上述现象的出现,是因为em是相对于当前元素字体的大小。由于中的字体大小现在设置为2em, 因此中其它属性的1em值就是 1em = 32px。这里比较容易引起误解的地方。
2 什么是REM?rem表示 root em,它是相对于根元素的长度单位。这里根元素就是中定义的字体大小。这意味着任何地方的1rem总是等于中定义的字体大小。
利用上述相同的代码,我们用 rem 来代替 em,查看margin-bottom的计算值究竟是多少?
h1 { font-size: 2rem; margin-bottom: 1rem; /* 1rem = 16px */ } p { font-size: 1rem; margin-bottom: 1rem; /* 1rem = 16px */ }
如上述代码所示,1rem总是等于16px(除非变更了字体的大小)。rem的大小相较于em来说意义更直接明确,也很容易理解。
3 REM 还是 EM?在项目开发中究竟是选用 rem 还是 em 一直以来争议不断。一些开发人员不使用rem,因为rem使组件不那么模块化。而另一些开发人员喜欢rem的简单性,使用rem处理所有元素。
其实 em和rem都有各自的优势和劣势,在实际项目开发中,应该结合使用两者,利用各自的优势,从而实现较好代码质量和显示效果。
那么在具体的应用中如何在两者中做选择呢?有两条简单的指导原则:
如果属性尺寸要根据元素字体进行缩放,则使用em
其它情况下都使用rem
上述规则太简单了。 为了更好的理解上述规则,我们就以一个简单的header组件为例,说明多带带使用两者来实现组件遇到的问题,并体会结合使用两者所带来的优势。
3.1 只使用REM这里我们只使用rem来编写一个header组件,代码及运行结果如下:
.header { font-size: 1rem; padding: 0.5rem 0.75rem; background: #7F7CFF; }
接下来,网站需要一个尺寸更大的header组件。
变更CSS代码如下:
.header { font-size: 1rem; padding: 0.5rem 0.75rem; background: #7F7CFF; } .header-large { font-size: 2rem; }
运行结果如下:
从上述运行结果可以看出,文字的内边距(padding)过小,显示效果不协调。如果我们坚持只使用rem,只能变更css代码如下:
.header { font-size: 1rem; padding: 0.5rem 0.75rem; background: #7F7CFF; } .header-large { font-size: 2rem; padding: 1rem 1.5rem; }
变更后运行结果如下:
上述代码及运行结果,虽然达到了预期的显示效果,但却违背了代码复用的原则。如果网站有多种尺寸的.header样式,就要多次重复的定义内边距。重复的代码增加了项目复杂度,降低了可维护性。
这时可以利用em可以变更上述代码如下:
.header { font-size: 1rem; padding: 0.5em 0.75em; background: #7F7CFF; } .header-large { font-size: 2rem; }
运行结果请查看演示程序:
演示代码
如上述演示程序所示,当元素属性值的大小需要根据元素字体尺寸缩放时,就应该应用 em 来定义属性尺寸。这就是前述规则中的第一条规则。
3.2 只使用EM如果只使用em来定义上述组件,结果会怎样呢?
我们变更上述代码如下(em替换rem):
.header { font-size: 1em; padding: 0.5em 0.75em; background: #7F7CFF; } .header-large { font-size: 2em; }
为更接近实际,我们引入了
元素,并变更html代码如下:
名人名言简单是稳定的前提
名人名言简单是稳定的前提
增加p元素css代码如下:
p { padding: 0.5em 0.75em; }
运行结果如下:
从上述运行经果中,不难看出.header-large部分的标题并没有和文本左对齐。而如果只使用em实现左对齐,则需要变更CSS代码如下:
.header { font-size: 1em; padding: 0.5em 0.75em; background: #7F7CFF; } .header-large { font-size: 2em; padding-left: 0.375em; padding-right: 0.375em; }
变更后运行结果如下:
上述代码及运行结果,虽然达到了预期的显示效果,但却违背了代码复用的原则。如果网站有多种尺寸的.header样式,就要多次重复的定义左右边距。重复的代码增加了项目复杂度,降低了可维护性。
解决上述问题的办法是结合使用em和rem,即使用em定义上下边距,使用rem定义左右边距。变更后代码如下:
.header { padding: 0.5em 0.75rem; font-size: 1em; background: #7F7CFF; } .header-large { font-size: 2em; }
运行结果请查看演示程序:
演示代码
3.3 EM还是REM总结究竟是该使用em还是rem呢?答案应该是结合使用em和rem。当属性值的大小需要根据当前元素字体尺寸缩放时,就选用em,其它的情况都使用更简单的rem。
4 em及rem值的设定em和rem 属性值都要经过计算转化成绝过长度单位。常用的字体尺寸用相对长度单位表示会很困难。看下面常用字体值的rem表示(基本字体尺寸是16px):
10px = 0.625rem
12px = 0.75rem
14px = 0.875rem
16px = 1rem (base)
18px = 1.125rem
20px = 1.25rem
24px = 1.5rem
30px = 1.875rem
32px = 2rem
如上述列表所示,上述尺寸值的表示及计算都不分的不便。为了解决上述问题要用到一个小技巧,即著名的 "62.5%"技术。具体请查看下述代码:
body { font-size:62.5%; } /* =10px */ h1 { font-size: 2.4em; } /* =24px */ p { font-size: 1.4em; } /* =14px */
通过62.5%的设定,就可以很容易用em来定义具体属性的尺寸了(10倍的关系)。
而rem,则需要采用如下的方式:
html { font-size: 62.5%; } /* =10px */ body { font-size: 1.4rem; } /* =14px */ h1 { font-size: 2.4rem; } /* =24px */5 响应式例子
一个简单的响应式的例子,调整浏览器宽度查看演示效果。
演示代码
6 参考资料W3C:CSS Values and Units Module Level 3
zellwk:REM vs EM – The Great Debate
sitepoint:Understanding and Using rem Units in CSS
tutsplus:Comprehensive Guide: When to Use Em vs. Rem
css-tricks:Confused About REM and EM?
7 说明文中所述文字及代码部分汇编于网络。因时间不足,能力有限等原因,存在文字阐述不准及代码测试不足等诸多问题。因此只限于学习范围,不适用于实际应用。另em和rem在较老的浏览器中存在兼容性问题。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/113111.html
摘要:值得注意的是,这个设置对使用或其他绝对单位定义的字号大小无效。事实上,提供了一个在和间的相对单位折中解决方案,而且更易于使用。图使用相对单位和继承字号的面板下面是模板,加到你的页面吧。 showImg(https://segmentfault.com/img/bVbdOMr?w=920&h=450); 前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》,其...
摘要:相对单位的值会根据外部影响因素的变化而变化。很自然,相对单位使用起来会比较困难。在本章中,我将揭开相对单位的神秘面纱。重点来了,使用相对单位声明的值会由浏览器转化为一个绝对值,我们称之为计算值。 showImg(https://segmentfault.com/img/bVbdtsA); 前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》,其中的第二章《W...
摘要:还有视口相关单位,依赖浏览器的视口大小来定义长度的。如果你不熟悉视口相关单位的话,在这里简单介绍一下。笔记视口相关单位对于大多数浏览器还是一项比较新的特性,所以当你试图把这个特性和其他样式混搭时,有可能会有一些很奇怪的。 前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》,其中的第二章《Working with relative units》,书中对rel...
摘要:写了一篇文章,里面记录了他在实际使用单位过程中的一些感受。他的解决方式充分利用了到目前为止我们遇到的三种单位。根元素的长度单位依旧采用,模块用单位,模块内的元素使用单位。随后在中单位的强大之处提出了他的观点。 什么是 rem 可能在你使用收音机或者用其他音乐播放器之前,就已经听过R.E.M.这个词了。在这个乐队眼中,这个词是浅睡眠时眼球的快速转动的缩写,而在 css 中,rem 代表着...
摘要:正文概念本次要谈的移动不是,只是很普通的移动端的界面。默认行为作为之前开发端的人员,第一反应就是如何把那么大的界面内容展现到手机小小的屏幕上。就是在显示多行文字的时候,可能需要在自己期望显示多少行之后,省略后面的文字,然后以。。。 前言 开发生涯总是丰富多采,工作多年,不同领域还是逃不过雨露均沾,之前开发过android,微信,ios,web网站也玩过。但是对于移动web这一块,确实没...
阅读 1206·2021-11-15 18:14
阅读 2970·2021-08-25 09:38
阅读 2605·2019-08-30 10:55
阅读 2564·2019-08-29 16:39
阅读 1241·2019-08-29 15:07
阅读 2380·2019-08-29 14:14
阅读 718·2019-08-29 12:36
阅读 870·2019-08-29 11:21