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 27 HTML / CSS
总结30个CSS3选择器
Apr 13 HTML / CSS
CSS3 Calc实现滚动条出现页面不跳动问题
Sep 14 HTML / CSS
如何在网站上添加谷歌定位信息
Apr 16 HTML / CSS
canvas学习笔记之绘制简单路径
Jan 28 HTML / CSS
HTML5标签使用方法详解
Nov 27 HTML / CSS
使用phonegap进行本地存储的实现方法
Mar 31 HTML / CSS
完美解决IE8下不兼容rgba()的问题
Mar 31 HTML / CSS
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
Aug 18 HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
Nov 29 HTML / CSS
HTML5中的网络存储实现方式
Apr 28 HTML / CSS
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
Dec 24 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
PHP使用CURL模拟登录的方法
2015/07/08 PHP
PHP判断表达式中括号是否匹配的简单实例
2016/10/22 PHP
jquery 延迟执行实例介绍
2013/08/20 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
基于javascript编写简单日历
2016/05/02 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
2016/06/24 Javascript
js实现简单的碰壁反弹效果
2016/08/30 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
Angular2 父子组件数据通信实例
2017/06/22 Javascript
让div运动起来 js实现缓动效果
2017/07/06 Javascript
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
使用vs code开发Nodejs程序的使用方法
2017/09/21 NodeJs
Angular4 ElementRef的应用
2018/02/26 Javascript
vue路由拦截及页面跳转的设置方法
2018/05/24 Javascript
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
2019/03/11 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
2019/06/05 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
2020/05/15 Javascript
Vue的自定义组件不能使用click方法的解决
2020/07/28 Javascript
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
Python实用日期时间处理方法汇总
2015/05/09 Python
Python实现获取本地及远程图片大小的方法示例
2018/07/21 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
Pytorch 中retain_graph的用法详解
2020/01/07 Python
Python栈的实现方法示例【列表、单链表】
2020/02/22 Python
世界上最具创新性的增强型知名运动品牌:Proviz
2018/04/03 全球购物
碧欧泉法国官网:Biotherm法国
2019/10/23 全球购物
工商管理专业实习生自我鉴定
2013/09/29 职场文书
后勤部长岗位职责
2013/12/14 职场文书
企业宣传策划方案
2014/05/29 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
领导班子奢靡之风查摆问题及整改措施
2014/09/27 职场文书
2015年党员干部承诺书
2015/01/21 职场文书
2016大学自主招生推荐信范文
2015/03/23 职场文书
大队委员竞选演讲稿
2015/11/20 职场文书
《富饶的西沙群岛》教学反思
2016/02/16 职场文书