web开发中该用 em 还是 rem 呢?

  • 时间:2018-09-19 23:10 作者:web秀 来源:web秀 阅读:840
  • 扫一扫,手机访问
摘要:点击右上方红色按钮关注“web秀”,让你真正秀起来!简言em 和 rem这种相对长度单位进行页面排版是web开发中的最好的选择。在页面排版中较好应用em 和 rem,根据设施尺寸缩放显示元素的大小。这就使得组件在不同设施上都达到最佳的显示效果成为可能。web开发中该用 em 还是 rem 呢?但问题
点击右上方红色按钮关注“web秀”,让你真正秀起来!

简言

em 和 rem这种相对长度单位进行页面排版是web开发中的最好的选择。在页面排版中较好应用em 和 rem,根据设施尺寸缩放显示元素的大小。这就使得组件在不同设施上都达到最佳的显示效果成为可能。

web开发中该用 em 还是 rem 呢?

web开发中该用 em 还是 rem 呢?


但问题是到底该用 em 还是 rem 呢?关于这个问题一直存在比较大的争议。本文将会给大家详情到底什么是 em 和 rem 和如何进行两者的选择,以及结合两者优势构建板块化的web组件。

什么是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。这里比较容易引起误会的地方。

什么是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来说意义更直接明确,也很容易了解。

抉择rem/em

在项目开发中到底是选用 rem 还是 em 一直以来争议不断。少量开发人员不使用rem,由于rem使组件不那么板块化。而另少量开发人员喜欢rem的简单性,使用rem解决所有元素。

其实 em和rem都有各自的优势和劣势,在实际项目开发中,应该结合使用两者,利用各自的优势,从而实现较好代码质量和显示效果。

那么在具体的应用中如何在两者中做选择呢?有两条简单的指导准则:


  • 假如属性尺寸要根据元素字体进行缩放,则使用em
  • 其它情况下都使用rem


上述规则太简单了。 为了更好的了解上述规则,我们就以一个简单的header组件为例,说明单独使用两者来实现组件遇到的问题,并体会结合使用两者所带来的优势。


只使用rem

这里我们只使用rem来编写一个header组件,代码及运行结果如下:

.header {
font-size: 1rem;
padding: 0.5rem 0.75rem;
background: #7F7CFF;
}


web开发中该用 em 还是 rem 呢?

web开发中该用 em 还是 rem 呢?


接下来,网站需要一个尺寸更大的header组件。变更CSS代码如下:

.header {
font-size: 1rem;
padding: 0.5rem 0.75rem;
background: #7F7CFF;
}
.header-large {
font-size: 2rem;
}
web开发中该用 em 还是 rem 呢?

web开发中该用 em 还是 rem 呢?

从上述运行结果可以看出,文字的内边距(padding)过小,显示效果不协调。假如我们坚持只使用rem,只能变更css代码如下:

.header {
font-size: 1rem;
padding: 0.5rem 0.75rem;
background: #7F7CFF;
}
.header-large {
font-size: 2rem;
padding: 1rem 1.5rem;
}
web开发中该用 em 还是 rem 呢?

web开发中该用 em 还是 rem 呢?


上述代码及运行结果,尽管达到了预期的显示效果,但却违反了代码复用的准则。假如网站有多种尺寸的.header样式,就要屡次重复的定义内边距。重复的代码添加了项目复杂度,降低了可维护性。

这时可以利用em可以变更上述代码如下:

.header {
font-size: 1rem;
padding: 0.5em 0.75em;
background: #7F7CFF;
}
.header-large {
font-size: 2rem;
}

当元素属性值的大小需要根据元素字体尺寸缩放时,就应该应用 em 来定义属性尺寸。这就是前述规则中的第一条规则。

只使用em

假如只使用em来定义上述组件,结果会怎么呢?

我们变更上述代码如下(em替换rem):

.header {
font-size: 1em;
padding: 0.5em 0.75em;
background: #7F7CFF;
}
.header-large {
font-size: 2em;
}
p {
padding: 0.5em 0.75em;
}

为更接近实际,我们引入了

元素,并变更html代码如下:

div class="header header-large">名人名言

简单是稳固的前提


名人名言

简单是稳固的前提


web开发中该用 em 还是 rem 呢?

web开发中该用 em 还是 rem 呢?

从上述运行经果中,不难看出.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;
}
web开发中该用 em 还是 rem 呢?

web开发中该用 em 还是 rem 呢?


上述代码及运行结果,尽管达到了预期的显示效果,但却违反了代码复用的准则。假如网站有多种尺寸的.header样式,就要屡次重复的定义左右边距。重复的代码添加了项目复杂度,降低了可维护性。

处理上述问题的办法是结合使用em和rem,即便用em定义上下边距,使用rem定义左右边距。变更后代码如下:

.header {
padding: 0.5em 0.75rem;
font-size: 1em;
background: #7F7CFF;
}
.header-large {
font-size: 2em;
}

总结

到底是该使用em还是rem呢?答案应该是结合使用rem和rem。当属性值的大小需要根据当前元素字体尺寸缩放时,就选用em,其它的情况都使用更简单的rem。

最后提供小技巧:em及rem值的设定

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 */
  • 全部评论(0)
最新发布的资讯信息
【系统环境|】极客时间-数据分析实战45讲【完结】(2021-09-02 16:26)
【系统环境|windows】字节跳动前台面试题解析:盛最多水的容器(2021-03-20 21:27)
【系统环境|windows】DevOps敏捷60问,肯定有你想理解的问题(2021-03-20 21:27)
【系统环境|windows】字节跳动最爱考的前台面试题:JavaScript 基础(2021-03-20 21:27)
【系统环境|windows】JavaScript 的 switch 条件语句(2021-03-20 21:27)
【系统环境|windows】解决 XML 数据应用实践(2021-03-20 21:26)
【系统环境|windows】20个编写现代CSS代码的建议(2021-03-20 21:26)
【系统环境|windows】《vue 3.0探险记》- 运行报错:Error:To install them, you can run: npm install --save core-js/modules/es.arra...(2021-03-20 21:24)
【系统环境|windows】浅谈前台可视化编辑器的实现(2021-03-20 21:24)
【系统环境|windows】产品经理入门迁移学习指南(2021-03-20 21:23)
血鸟云
手机二维码手机访问领取大礼包
返回顶部