CSS中em的正确打开方式详解


Posted in HTML / CSS onApril 08, 2021

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

用户的浏览器默认渲染的文字大小是“16px”,换句话说,Web页面中“body”及其子元素的文字大小在用户浏览器下默认渲染是“16px”。
我们都知道:em(和 rem )是一个相对单位!“相对”的意思是:

  • 相对的计算必然有一个参考物,那么这里相对所指的就是父元素的font-size。比如说:如果在一个 div 设置字体大小为“16px”,此时这个 div 的后代元素教程了是将继承他的字体大小,除非重新在其后代元素中进行过显示的设置。如果用户通过浏览器的UI控件改变了文字的大小,那么我们整个页面也会进行放大(或缩小),不至于用户改变了浏览器的字体后会致使整个页面崩溃!

只不过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;
}

CSS中em的正确打开方式详解
 

看到图中的红线框了么?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):
 

CSS中em的正确打开方式详解
 

这也是为什么你对每一层子元素都设置了 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

到此这篇关于CSS中em的正确打开方式详解的文章就介绍到这了,更多相关css打开em内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3 完美实现圆角效果
Jul 13 HTML / CSS
CSS3 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
CSS3模块的目前的状况分析
Feb 24 HTML / CSS
CSS实现的一闪而过的图片闪光效果
Apr 23 HTML / CSS
纯CSS绘制漂亮的圆形图案效果
May 07 HTML / CSS
HTML5时代CSS设置漂亮字体取代图片
Sep 04 HTML / CSS
基于ccs3的timeline时间线实现方法
Apr 30 HTML / CSS
html5 初试 indexedDB(推荐)
Jul 21 HTML / CSS
html5使用canvas实现弹幕功能示例
Sep 11 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
Jan 10 HTML / CSS
Canvas制作的下雨动画的示例
Mar 06 HTML / CSS
canvas实现漂亮的下雨效果的示例
Apr 18 HTML / CSS
几款流行的HTML5 UI框架比较(小结)
css 中多种边框的实现小窍门
HTML中table表格拆分合并(colspan、rowspan)
HTML速写之Emmet语法规则的实现
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
Apr 07 #HTML / CSS
html+css 实现简易导航栏功能
Apr 07 #HTML / CSS
css3实现的加载动画效果
You might like
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
PHP中几个可以提高运行效率的代码写法、技巧分享
2014/08/21 PHP
Destoon实现多表查询示例
2014/08/21 PHP
深入理解PHP中mt_rand()随机数的安全
2017/10/12 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
javascript 冒号 使用说明
2009/06/06 Javascript
javascript textContent与innerText的异同分析
2010/10/22 Javascript
JS操作JSON要领详细总结
2013/08/25 Javascript
js+css实现回到顶部按钮(back to top)
2016/03/02 Javascript
BootStrap给table表格的每一行添加一个按钮事件
2017/09/07 Javascript
vue定义全局变量和全局方法的方法示例
2018/08/01 Javascript
JavaScript中关于base64的一些事
2019/05/06 Javascript
在vue中把含有html标签转为html渲染页面的实例
2019/10/28 Javascript
js实现时钟定时器
2020/03/26 Javascript
解决vue-photo-preview 异步图片放大失效的问题
2020/07/29 Javascript
[06:49]2018DOTA2国际邀请赛寻真——VirtusPro傲视群雄
2018/08/12 DOTA
[50:27]Secret vs VG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[01:28:44]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第一场 1月10日
2021/03/11 DOTA
Python的Scrapy爬虫框架简单学习笔记
2016/01/20 Python
Python实现将不规范的英文名字首字母大写
2016/11/15 Python
python爬虫使用cookie登录详解
2017/12/27 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
Python如何使用Gitlab API实现批量的合并分支
2019/11/27 Python
python 使用事件对象asyncio.Event来同步协程的操作
2020/05/04 Python
使paramiko库执行命令时在给定的时间强制退出功能的实现
2021/03/03 Python
全面解析CSS Media媒体查询使用操作(推荐)
2017/08/15 HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
JBL英国官网:JBL UK
2018/07/04 全球购物
.NET remoting的两种通道是什么
2016/05/31 面试题
网上卖盒饭创业计划书范文
2014/02/07 职场文书
关于读书的活动方案
2014/08/14 职场文书
党支部四风整改方案
2014/10/25 职场文书
销售员态度差检讨书
2014/10/26 职场文书
万能检讨书
2015/01/27 职场文书