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轻松实现圆角效果
Nov 09 HTML / CSS
Web前端绘制0.5像素的几种方法
Aug 11 HTML / CSS
利用css3实现的简单的鼠标悬停按钮
Nov 04 HTML / CSS
举例详解CSS3中的Transition
Jul 15 HTML / CSS
CSS3的resize属性使用初探
Sep 27 HTML / CSS
纯CSS3制作的鼠标悬停时边框旋转
Jan 03 HTML / CSS
css3实现可拖动的魔方3d效果
May 07 HTML / CSS
html5 学习简单的拾色器
Sep 03 HTML / CSS
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
Jan 11 HTML / CSS
html5移动端自适应布局的实现
Apr 15 HTML / CSS
HTML5页面音频自动播放的实现方式
Jun 21 HTML / CSS
CSS实现切角+边框+投影+内容背景色渐变效果
Nov 01 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
ThinkPHP有变量的where条件分页实例
2014/11/03 PHP
php设置静态内容缓存时间的方法
2014/12/01 PHP
PHP判断网络文件是否存在的方法
2015/03/12 PHP
PHP 根据key 给二维数组分组
2016/12/09 PHP
php测试kafka项目示例
2020/02/06 PHP
40款非常有用的 jQuery 插件推荐(系列一)
2011/12/21 Javascript
window.onload追加函数使用示例
2014/03/03 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
2014/03/26 Javascript
jQuery实现的Div窗口震动效果实例
2015/08/07 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
jquery中取消和绑定hover事件的实现代码
2016/06/02 Javascript
Javascript日期格式化format函数的使用方法
2016/08/30 Javascript
Vue声明式渲染详解
2017/05/17 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
2017/10/27 Javascript
详解Vue2 SSR 缓存 Api 数据
2017/11/20 Javascript
使用Angular CLI生成 Angular 5项目教程详解
2018/03/18 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
2018/08/25 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
Vue源码解析之Template转化为AST的实现方法
2018/12/14 Javascript
JavaScript常见继承模式实例小结
2019/01/11 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
2019/01/23 Javascript
JS中实现浅拷贝和深拷贝的代码详解
2019/06/05 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
2019/12/20 Javascript
深入了解Vue.js 混入(mixins)
2020/07/23 Javascript
django批量导入xml数据
2016/10/16 Python
Python编程之gui程序实现简单文件浏览器代码
2017/12/08 Python
Python 内置函数进制转换的用法(十进制转二进制、八进制、十六进制)
2018/04/30 Python
利用python中集合的唯一性实现去重
2020/02/11 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
国际奢侈品品牌童装购物网站:Designer Childrenswear
2019/05/08 全球购物
会展中心部门工作职责
2013/11/27 职场文书
MySQL基础(二)
2021/04/05 MySQL
python如何在word中存储本地图片
2021/04/07 Python
Python使用OpenCV实现虚拟缩放效果
2022/02/28 Python
redis数据一致性的实现示例
2022/03/18 Redis
vue.js 使用原生js实现轮播图
2022/04/26 Vue.js