em与rem

港控/mmm° 2023-03-13 06:38 10阅读 0赞

# rem方式： #

当使用 rem 单位，他们转化为像素大小取决于页根元素的字体大小，即 html 元素的字体大小。 根元素字体大小乘以你 rem 值。

例如，根元素的字体大小 16px，10rem 将等同于 160px，即 10 x 16 = 160。[·][Link 1]

所以调整根元素（html）的font-size大小即可调整整体的字体大小

# em方式： #

body设置font-size: 1em;//默认字体大小16px

使用`em`可改变HTML的默认`font-size`，如果设置为`62.5%`，则表示将默认字体大小从`16px`修改为`10px`，即`10px / 16px = 62.5%`。

html设置font-size: 100%;

## 重点理解: ##

有一个比较普遍的误解，认为 em 单位是相对于父元素的字体大小。 事实上，根据W3标准 ，它们是相对于使用em单位的元素的字体大小。[·][Link 1]

父元素的字体大小可以影响 em 值，但这种情况的发生，纯粹是因为继承。 让我们看看为什么以及如何起作用。

## 例子： ##

如果我们的根元素字体大小为 16px (通常是默认值) 一个子元素 div 里面padding值为 1.5em，该 div 将从根元素继承字体大小 16px。 因此padding会翻译成 24px，即 1.5 x 16 = 24。[·][Link 1]

如果我们加多一个div来包裹原先的div，然后设置其字体大小为 1.25em呢?

我们包裹的 div 继承根元素字体大小 16px ，并乘以它自己的 1.25em 的字体大小。 这将设置包裹 div 字体大小为 20px，即 1.25 x 16 = 20。

*  A.现在我们原始的 div 不再直接从根元素继承,而是从其新的父元素继承字体大小为 20px 1.5em 其padding值现在等于 30px，即 1.5 x 20 = 30。
 *  B1.这个继承效应可以更复杂，如果我们向我们原始的 div 添加 em 字体单位，比方说 1.2em。
 *  B2.Div 从其父级继承 20px 字体大小，然后，乘以它自己的 1.2em 设置，给它 24px，即 1.2 × 20 = 24 新字体大小。
 *  B3.div上的1.5em padding 现在将再次改变大小，用新的字体大小，36px，即 1.5 × 24 = 36 。

最后，为了进一步说明那个 em 单位是相对于他们最终获得(不是父元素)的字体大小，让我们来看看设置padding 1.5em 如果我们显式设置 div 使用 14px值，不继承字体大小会发生什么。

现在，我们的padding为 21px，即 1.5 x 14 = 21 已经变小了。 它不受父元素的字体大小。

也就是如下计算方式

计算方式：

1、如果元素自身没有设置字体大小，那么元素自身上的所有属性值如“boder、width、height、padding、margin、line-height”等值，我们都可以按下面的公式来计算：

1 ÷ 父元素的font-size × 需要转换的像素值 = em值

2、如果元素设置了字体大小，那么字体大小的转换依旧按下来公式计算：

1 ÷ 父元素的font-size × 需要转换的像素值 = em值

3、此元素的其他属性，如“border、width、height、padding、margin、line-height”计算就需要按照下面的公式来计算：

1 ÷ 元素自身的font-size × 需要转换的像素值 = em值

[Link 1]: http://caibaojian.com/rem-vs-em.html

发表评论取消回复

表情：

评论列表（有 0 条评论，10人围观）

还没有评论，来说两句吧...

相关阅读

相关 em与rem

rem方式：当使用 rem 单位，他们转化为像素大小取决于页根元素的字体大小，即 html 元素的字体大小。根元素字体大小乘以你 rem 值。例如，根元素的字体大

港控/mmm°/ 2023年03月13日 06:38/ 0 赞/ 11 阅读

相关 CSS font-size: em&rem

字体大小（font-size）单位：em是相对长度单位。它是相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（16px）。

太过爱你忘了你带给我的痛/ 2022年06月14日 03:58/ 0 赞/ 239 阅读

相关 rem px pt em

px(pixe,像素l):是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI(Dots Per Inch，每英寸像素数)，在扫描

野性酷女/ 2022年06月01日 12:55/ 0 赞/ 319 阅读

相关 px、em、rem

> px、em、rem都是用来描述字体大小的单位 px > px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 > 任意浏

Bertha 。/ 2022年06月01日 04:28/ 0 赞/ 341 阅读

相关 rem 单位和 em 单位

首先要知道：rem 和 em 是相对单位；我们通过代码来看 rem 和 em的使用和区别： em:相对于父级 <!doctype html>

灰太狼/ 2022年05月30日 10:45/ 0 赞/ 369 阅读

相关 em,rem的区别与使用

一，rem单位如何转换为像素值 1.当使用rem单位的时候，页面转换为像素大小取决于叶根元素的字体大小，即HTML元素的字体大小。根元素字体大小乘rem的值。例如，根元素

超、凢脫俗/ 2022年04月04日 18:52/ 0 赞/ 296 阅读

相关移动端适配rem与em

前言在移动端页面开发过程中避免不了对页面做适配，适配方案说多还是挺多的，接下来主要讨论一下rem和em。兼容性 ios：6.1系统以上都支持 android：2.1

川长思鸟来/ 2022年02月19日 00:05/ 0 赞/ 468 阅读

相关 em和rem

1.em和rem <style> .hah{ width: 10em; height: 10em;/e

缺乏、安全感/ 2022年01月29日 01:27/ 0 赞/ 392 阅读

相关 em和rem，rem适配手机屏幕

em和rem em:一种长度单位，参照当前元素的字号，如果没有设置，就参照父容器或者当前浏览器的默认字号。举个例子： <!DOCTYPE html>

分手后的思念是犯贱/ 2021年11月23日 01:38/ 0 赞/ 545 阅读

相关轻松运用rem布局以及rem与em区别

rem 布局的定义： css(相对单位，是相对于网站根元素的font-size来计算大小，比如说html的font-size:100px,那么设置的0.1rem就是10px,

待我称王封你为后i/ 2021年08月13日 12:47/ 0 赞/ 601 阅读