为什么说“通常情况下1em=16px”?
用户的浏览器默认渲染的文字大小是“16px”,换句话说,Web页面中“body”及其子元素的文字大小在用户浏览器下默认渲染是“16px”。
我们都知道:em
(和 rem
)是一个相对单位!“相对”的意思是:
font-size
。比如说:如果在一个 div 设置字体大小为“16px”,此时这个 div 的后代元素教程了是将继承他的字体大小,除非重新在其后代元素中进行过显示的设置。只不过em是相对于父元素,而rem是相对于“根”元素(html)
em到底是怎样的?
em:相对单位。其基准值是当前元素的字号大小;实际值则取决于它(继承)的父元素。
经过笔者查阅资料+不断测试,这其中有一个“不为人注意的”公式:
目标em值=目标像素值/父元素像素值
(↑:em是如何与父元素 font-size
产生联系的
<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中再加一个属性:
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 时其真正大小似乎并不是自己想要的!
(至于其中为什么有和font值一样的margin,就要参考张鑫旭《CSS世界》中提到的“幽灵空白元素”了!)
rem也是这样的?!
rem也是一个相对单位,它是相对于root根元素变化的。
它的计算方式和 em 的大差不差。但是这里有一个“常见的误区”:一般我们可以通过页面宽度动态更改根元素的 font-size
值来做响应适配:
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来做响应式:
html { font-size: calc(112.5% + 4 * (100vw - 600px) / 400); }
配合 媒体查询@media
简介 在日常开发中,代码变更比较频繁,有时候想让前几次提交的合并为一次提交,...
Fedora Linux和平铺式桌面WM的爱好者粉丝欢呼吧,即将推出的Fedora Linux定制版...
ajax 实现三级联动,相当于写了一个小插件,用的时候直接拿过来用就可以了,这里...
1.视图组件介绍 视图组件是 ASP.NET Core MVC 的新特性,类似于局部视图,但它更...
作为脚本漏洞的头号杀手锏——数据库下载漏洞,现在已经被越来越多的人所熟知。...
python实现基于八方向判断的断裂连接 讲解 略 代码 八方向连接算法 import numpy...
作为一个全球流行的工具,Redis是高性能的key-value数据库。对于这个Key-Value ...
一、前世今生 .NET诞生以来,程序集的动态加载和卸载都是一个Hack的技术,之前的...
YUV420转RGB888 yuv420的数据存储方式是planar就是在一帧中先存y分量存完y存u接...
前言 此控件直接进行打印底部会有水印,通过官网购买可以解决; 如不想购买,可...