深入理解CSS中em, rem, ex区别,及使用技巧

Posted homehtml

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了深入理解CSS中em, rem, ex区别,及使用技巧相关的知识,希望对你有一定的参考价值。

CSS 中常见尺寸

单位 描述
% 百分比
in 英寸
cm 厘米
mm 毫米
ex 一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)
pt 磅 (1 pt 等于 1/72 英寸)
pc 12 点活字 (1 pc 等于 12 点)
px 像素 (计算机屏幕上的一个点)
em 1em 等于当前的字体尺寸。
2em 等于当前字体尺寸的两倍。
例如,如果某元素以 12pt 显示,那么 2em 是24pt。
在 CSS 中,em 是非常有用的单位,因为它可以自动适应用户所使用的字体。
rem rem表示“Root EM”,字面上指的是根元素的em大小。
在Web文档的上下文中,根元素就是你的html元素。
如果没有重置,html默认font-size:16px。

emrem 比较

单位 特点
em 相对单位em是相对于元素本身的字体大小的
在css中唯一例外的是font-size属性,它的emex值指的是相对父元素的字体大小
rem 集相对大小和绝对大小的优点于一身,
通过它既可以做到只修改根元素就成比例地调整所有字体大小,
又可以避免(使用em)字体大小逐层复合的连锁反应

em 缺点

  1. em 的值并不是固定的;
  2. em 会继承父级元素的字体大小。

举例

body{
  font-size: 10px;
}

h2{
  display: block;
  width: 80%;
  font-size: 1.5em;
  margin: 0.5em;
}
h2的字体大小继承了body字体, 10px * 1.5 = 15px
h2margin属性则是相对于本元素字体大小: 15px * 0.5 = 7.5px
如下图所示

技术图片


rem 使用小技巧

  1. body选择器中声明Font-size=62.5%;
  2. 将你的原来的px数值除以10,然后换上rem作为单位;

参考文章链接

css中单位em和rem
彻底弄懂css中单位px和em,rem的区别












以上是关于深入理解CSS中em, rem, ex区别,及使用技巧的主要内容,如果未能解决你的问题,请参考以下文章

css中em和rem的区别

彻底弄懂css中单位px和em,rem的区别

CSS长度单位及区别 em ex px pt in

彻底弄懂css中单位px和em,rem的区别

web开发中的长度单位(px,em,ex,rem),如何运用,看完这篇就够了!

css中px,em和rem的区别