客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
为什么说“通常情况下1em=16px”？用户的浏览器默认渲染的文字大小是“16px”，换句话说，Web页面中“body”及其子元素的文字大小在用户浏览器下默认渲染是“16px”。
em到底是怎样的？em：相对单位。其基准值是当前元素的字号大小；实际值则取决于它（继承）的父元素。 （↑：em是如何与父元素 <body> I'm <p>yunxiaomeng</p>. </body>
body{
font-size: 16px;
}
p{
font-size: 1.2em;
}
看到图中的红线框了么？p标签实际被渲染出的大小（目标像素值）为：16(px) x 1.2=19.2(px) 这里还有一个要特别注意的地方：如果同一个元素的另一个选择器/属性用了一个不一样的字号值（font-size）去覆盖前一个值，这将会改变 em 在这个域下的基准值！
p{
font-size: 1.2em;
padding: 1.2em;
}
那么 padding 的实际渲染值（目标像素值）= 19.2(px) x 1.2 = 23.04(px)（即16 x 1.2 x 1.2）：
这也是为什么你对每一层子元素都设置了 em 时其真正大小似乎并不是自己想要的！ rem也是这样的？！rem也是一个相对单位，它是相对于root根元素变化的。
let htmlWidth=document.documentElement.clientWidth || document.body.clientWidth;
let htmlDom=document.getElementsByTagName('html')[0];
window.onresize=function () {
htmlDom.style.fontSize=htmlWidth/20+'px';
};
但很多人会误以为rem值是和“页面大小对应的”。其实这是错误的！
到此这篇关于CSS中em的正确打开方式详解的文章就介绍到这了,更多相关css打开em内容请搜索极客世界以前的文章或继续浏览下面的相关文章，希望大家以后多多支持极客世界！ |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
六六分期app的软件客服如何联系？不知道吗？加qq群【895510560】即可！标题：六六分期
今天小编告诉大家如何处理win10系统火狐flash插件总是崩溃的问题，可能很多用户都不知
今天小编告诉大家如何对win10系统删除桌面回收站图标进行设置，可能很多用户都不知道
今天小编告诉大家如何对win10系统电脑设置节能降温的设置方法，想必大家都遇到过需要
我们在使用xp系统的过程中,经常需要对xp系统无线网络安装向导设置进行设置，可能很多
今天小编告诉大家如何处理win7系统玩cf老是与主机连接不稳定的问题，可能很多用户都不
电脑对日常生活的重要性小编就不多说了，可是一旦碰到win7系统设置cf烟雾头的问题，很
我们在日常使用电脑的时候，有的小伙伴们可能在打开应用的时候会遇见提示应用程序无法
今天小编告诉大家如何对win7系统打开vcf文件进行设置，可能很多用户都不知道怎么对win
今天小编告诉大家如何对win10系统s4开启USB调试模式进行设置，可能很多用户都不知道怎
请发表评论