相比px而言，在响应式web设计中，em有何优势？

程序员文章站 2022-04-09 17:42:30

...

我把html中所有长宽全部改用百分比，为了更好的适配不同尺寸的显示设备，而字体这块一直没有很好的解决办法，1em=16px，em的值并不是根据显示器宽度设置的百分比，那为什么还要将px改为em？我该怎么让我的字体大小也能有效的配合整体的百分比宽度？

回复内容：

px 是相对于屏幕分辨率而言的，一个小格子就代表一个 px 在不同分辨率的屏幕上，高分屏的 px 字体看起来会比低分屏的“小”，但事实上它们是一样大小的。
em 是根据元素字体大小定义的（如果本元素没有定义字体大小那么就以父元素字体大小为准，以此类推），字体大小是多少 px，该元素的 1em 就等于多少 px，所以 em 的优势就是可以根据屏幕分辨率的变化等比例地缩放字体。但是用 em 很不方便的地方就是随时都要考虑元素的字体大小，为了弥补这个缺点便出现了 rem。
rem 跟 em 不同的地方在于 rem 是根据根元素（html）的字体大小来确定的，像一般默认的 html 的字体大小是 16px

html {
    font-size: 16px;
}

em不是等于16px.

1em是等于父对象的字体大小.

要靠@media来控制不同分辨率下默认字体大小, 然后靠em控制该分辨率下的字体大小. 意义在于，你使用高分屏的时候，12px正好的字，在他上面就小了很多，你要修改px就要每个都改。
em只要在body上写2em，里面就自然2倍了。
倍儿爽。并不是1em=16px
em是一个相对单位，他的大小是相对于父级设定的字体大小的。
比如

这是父级元素

这是子级元素

这种情况下，1em就=16px；
如果这样写

这是父级元素

这是子级元素

这种情况下，1em就=12px；
同理，如果把1em改成0.5em，那么就是6px； 1.相对于父级字体，方便比例选取
2.方便自适应于各种屏幕(移动开发时依靠字体默认大小来确定显示的大小)

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。