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 相关文章推荐
定义css设备类型-Media Queries图表简介及使用方法
Jan 21 HTML / CSS
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
Mar 17 HTML / CSS
利用CSS3的3D效果制作正方体
Mar 10 HTML / CSS
HTML5-WebSocket实现聊天室示例
Dec 15 HTML / CSS
HTML5的结构和语义(5):交互
Oct 17 HTML / CSS
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
Jan 09 HTML / CSS
IE10 Error.stack 让脚本调试更加方便快捷
Apr 22 HTML / CSS
谈一谈HTML5本地存储技术
Mar 02 HTML / CSS
html5使用Drag事件编辑器拖拽上传图片的示例代码
Aug 22 HTML / CSS
详解如何通过H5(浏览器/WebView/其他)唤起本地app
Dec 11 HTML / CSS
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
Aug 28 HTML / CSS
HTML5页面音频自动播放的实现方式
Jun 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
笑谈配置,使用Smarty技术
2007/01/04 PHP
PHP 遍历文件实现代码
2011/05/04 PHP
php导出csv格式数据并将数字转换成文本的思路以及代码分享
2014/06/05 PHP
主流PHP框架的优缺点对比分析
2014/12/25 PHP
php使用pclzip类实现文件压缩的方法(附pclzip类下载地址)
2016/04/30 PHP
php获得刚插入数据的id 的几种方法总结
2018/05/31 PHP
PHP实现微信退款功能
2018/10/02 PHP
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
js 获取浏览器高度和宽度值(多浏览器)
2009/09/02 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
JavaScript prototype 使用介绍
2013/08/29 Javascript
JQuery each打印JS对象的方法
2013/11/13 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
2013/11/29 Javascript
new Date()问题在ie8下面的处理方法
2014/07/31 Javascript
js和jquery设置disabled属性为true使按钮失效
2014/08/07 Javascript
AngularJS入门教程之Scope(作用域)
2016/07/27 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
微信小程序图表插件wx-charts用法实例详解
2019/05/20 Javascript
关于layui 弹出层一闪而过就消失的解决方法
2019/09/09 Javascript
微信小程序中的上拉、下拉菜单功能
2020/03/13 Javascript
[03:02]安得倚天剑,跨海斩长鲸——中国军团出征DOTA2国际邀请赛
2018/08/14 DOTA
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
Python面向对象编程中的类和对象学习教程
2015/03/30 Python
Python3.4学习笔记之列表、数组操作示例
2019/03/01 Python
Pandas分组与排序的实现
2019/07/23 Python
给老师的道歉信
2014/01/11 职场文书
岗位职责风险防控
2014/02/18 职场文书
理工类毕业自我鉴定
2014/02/20 职场文书
企业宗旨标语
2014/06/10 职场文书
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
大学生求职自荐信
2015/03/24 职场文书
民事起诉书范本
2015/05/19 职场文书
分享15个Webpack实用的插件!!!
2021/03/31 Javascript
Apache Pulsar结合Hudi构建Lakehouse方案分析
2022/03/31 Servers
《进击的巨人》新联动CM 兵长强势出击兽巨人
2022/04/05 日漫