em在css中是什么意思,css中的em是什么

为什么说“通常情况下1em=16px”？

　　用户浏览器呈现的默认文本大小为“16px”。换句话说，网页中“body”及其子元素在用户浏览器下的默认文本大小是“16px”。

　　我们都知道：em(和rem)是一个相对单位！“相对”是指：

　　相对计算必须有一个引用，所以这里的相对指的是父元素的字体大小。例如，如果在一个div中将字体大小设置为“16px ”,则该div的后代元素此时将继承其字体大小，除非重置其后代元素中的显示设置。如果用户通过浏览器的UI控件改变文本的大小，那么我们的整个页面就会被放大(或者缩小)，这样用户改变浏览器的字体后整个页面就不会崩溃了！除了em相对于父元素，而rem相对于“根”元素(html)

em到底是怎样的？

　　 em:相对单位。它的基准值是当前元素的字体大小；实际值取决于其(继承的)父元素。

　　经过查阅资料，不断测试，有一个“不为人知”的公式：目标em值=目标像素值/父元素像素值。

　　(::em和父元素font-size有什么关系？

　　body I m pyunxiaomeng/p ./body body { font-size:16px；} p { font-size:1.2 em；}

　　看到图中的红线框了吗？标签的实际渲染大小(目标像素值)为：16(px) x 1.2=19.2(px)

　　这里还有一点需要特别注意：如果同一个元素的另一个选择器/属性使用了不同的字体大小来覆盖之前的值，就会改变这个域下em的基准值！

　　例如，我们将为上面的p添加另一个属性：

　　p { font-size:1.2 em；填充：1.2em}那么padding的实际渲染值(目标像素值)=19.2(px) x 1.2=23.04(px)(即16 x 1.2 x 1.2):

　　这就是为什么当你为每个子元素设置em时，它的真实大小似乎并不是你想要的！

　　(至于为什么会有和字体同值的边距，请参考张新旭《CSS世界》中提到的“鬼空白元素”！)

rem也是这样的？！

　　 rem也是相对单位，相对于root的根元素变化。

　　它的计算方法和em的没什么区别。但这里有一个“常见误区”:一般我们可以通过页面宽度动态改变根元素的字体大小值来进行响应适配：

　　let html width=document . document element . client width document . body . client width；let html DOM=document . getelementsbytagname( html )[0]；window . onresize=function(){ html DOM . style . font size=html width/20 px ；};但是很多人误以为rem值对应的是“页面大小”。其实这是错误的！

　　而且目前完全可以通过CSS:HTML { font-size:calc(112.5% 4 *(100 VW-600 px)/400)来响应；}配合媒体询问@media

　　关于css中em的正确打开方法这篇文章到此为止。有关在CSS中打开em的更多信息，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。