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
IE下实现类似CSS3 text-shadow文字阴影的几种方法
May 11 HTML / CSS
纯CSS实现的大小渐变、渐远效果
Apr 15 HTML / CSS
css3 column实现卡片瀑布流布局的示例代码
Jun 22 HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
Dec 04 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
Jan 09 HTML / CSS
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
Apr 10 HTML / CSS
Html5 canvas画图白板踩坑
Jun 01 HTML / CSS
HTML5实现移动端点击翻牌功能
Oct 23 HTML / CSS
CSS3 实现的图片悬停的切换按钮
Apr 13 HTML / CSS
HTML5之高度塌陷问题的解决
Jun 01 HTML / CSS
如何用H5实现好玩的2048小游戏
Jul 23 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
PHP3 safe_mode 失效漏洞
2006/10/09 PHP
PHP chmod 函数与批量修改文件目录权限
2010/05/10 PHP
解析PHP的Yii框架中cookie和session功能的相关操作
2016/03/17 PHP
HTML TO JavaScript 转换
2006/06/26 Javascript
初识javascript 文档碎片
2010/07/13 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
2012/11/08 Javascript
用innerhtml提高页面打开速度的方法
2013/08/02 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
2014/05/23 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
JS得到当前时间的方法示例
2017/03/24 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
2017/03/30 jQuery
vue-router实现编程式导航的代码实例
2019/01/19 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
2020/04/11 Javascript
Python算法应用实战之栈详解
2017/02/04 Python
Python使用OpenCV进行标定
2018/05/08 Python
pygame游戏之旅 创建游戏窗口界面
2018/11/20 Python
Python笔记之代理模式
2019/11/20 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
virtualenv介绍及简明教程
2020/06/23 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
pip 20.3 新版本发布!即将抛弃 Python 2.x(推荐)
2020/12/16 Python
Canvas实现保存图片到本地的示例代码
2018/06/28 HTML / CSS
基于html5 canvas做批改作业的小插件
2020/05/20 HTML / CSS
全球最大的网上自行车商店:Chain Reaction Cycles
2016/12/02 全球购物
购买一个高级域名:BuyDomains
2018/03/11 全球购物
美国市场上最实惠的送餐服务:Dinnerly
2018/03/18 全球购物
List、Map、Set三个接口,存取元素时,各有什么特点?
2015/09/27 面试题
西部世纪面试题
2014/12/05 面试题
造型师求职自荐信
2013/09/27 职场文书
汽车销售求职自荐信
2013/10/01 职场文书
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书
委托函范文
2015/01/29 职场文书
学校学期工作总结
2015/08/13 职场文书
关于Python OS模块常用文件/目录函数详解
2021/07/01 Python
服务器nginx权限被拒绝解决案例
2022/09/23 Servers