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 3D旋转rotate效果实例介绍
May 03 HTML / CSS
关于css兼容性问题及一些常见问题汇总
May 03 HTML / CSS
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
Aug 15 HTML / CSS
css3 flex布局 justify-content:space-between 最后一行左对齐
Jan 02 HTML / CSS
CSS3 rgb and rgba(透明色)的使用详解
Sep 25 HTML / CSS
HTML5 FormData 方法介绍以及实现文件上传示例
Sep 12 HTML / CSS
深入浅析HTML5中的SVG
Nov 27 HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
Oct 16 HTML / CSS
微信html5页面调用第三方位置导航的示例
Mar 14 HTML / CSS
html5 canvas实现给图片添加平铺水印
Aug 20 HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
Apr 07 HTML / CSS
CSS 鼠标选中文字后改变背景色的实现代码
May 21 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
Windows下安装Memcached的步骤说明
2010/04/25 PHP
php删除文本文件中重复行的方法
2015/04/28 PHP
Netbeans 8.2与PHP相关的新特性介绍
2016/10/08 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
Ajax+PHP实现的删除数据功能示例
2019/02/12 PHP
实例介绍PHP删除数组中的重复元素
2019/03/03 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
javascript forEach通用循环遍历方法
2010/10/11 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
javascript实现无限级select联动菜单
2015/01/02 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
2015/01/13 Javascript
jquery中change()用法实例分析
2015/02/06 Javascript
js数组去重的方法汇总
2015/07/29 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
angular.js+node.js实现下载图片处理详解
2017/03/31 Javascript
node文字生成图片的示例代码
2017/10/26 Javascript
小程序转发探索示例
2019/02/19 Javascript
JavaScript箭头函数中的this详解
2019/06/19 Javascript
微信小程序吸底区域适配iPhoneX的实现
2020/04/09 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
[54:08]LGD女子刀塔学院 DOTA2炼金术士教学
2014/01/09 DOTA
Windows系统配置python脚本开机启动的3种方法分享
2015/03/10 Python
python复制文件的方法实例详解
2015/05/22 Python
pymssql数据库操作MSSQL2005实例分析
2015/05/25 Python
Python温度转换实例分析
2018/01/17 Python
python 在屏幕上逐字显示一行字的实例
2018/12/24 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
Python3将jpg转为pdf文件的方法示例
2019/12/13 Python
Python批量将图片灰度化的实现代码
2020/04/11 Python
Python如何把Spark数据写入ElasticSearch
2020/04/18 Python
家长对老师的感言
2014/03/11 职场文书
《分一分》教学反思
2014/04/13 职场文书
公司任命书范本
2014/06/04 职场文书
出纳试用期自我鉴定范文
2014/09/16 职场文书
CSS 伪元素::marker详解
2021/06/26 HTML / CSS