搜索
查看
编辑修改
首页
UNITY
NODEJS
PYTHON
AI
GIT
PHP
GO
CEF3
JAVA
HTML
CSS
搜索
知新_RL
这个屌丝很懒,什么也没留下!
关注作者
热门标签
jquery
HTML
CSS
PHP
ASP
PYTHON
GO
AI
C
C++
C#
PHOTOSHOP
UNITY
iOS
android
vue
xml
爬虫
SEO
LINUX
WINDOWS
JAVA
MFC
CEF3
CAD
NODEJS
GIT
Pyppeteer
article
热门文章
1
[经典面试题]169. 多数元素
2
JDK8新特性_jdk 8 新特新
3
mongodb在Java中的分页查询
4
ROS安装D435 realsense sdk2.0
5
软件测试笔试、面试题目集锦_软件测试是软件质量保证的重要手段,下列哪种测试
6
使用 Flink 流处理框架读取kafka数据,直接输出_scala版flink读取kafka并输出
7
linux终端运行脚本文件命令,如何使文件(例如.sh脚本)可执行,因此可以从终端运行...
8
生成模型——自回归模型详解与PixelCNN构建
9
2021日本基恩士程序设计竞赛(AtCoder初学者比赛227)(C++)[枚举]_atcoder 怎么报名比赛
10
5. RabbitMQ工作模式——RabbitMQ
当前位置:
article
> 正文
em和px的区别一次彻底搞清楚!_em单位和px哪个容易省略
作者:知新_RL | 2024-02-17 01:32:22
赞
踩
em单位和px哪个容易省略
在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理想,ChinaUI等都是使用了px作为字体单位。只有百度好歹做了个可调的表率。而 在大洋彼岸,几乎所有的主流站点都使用em作为字体单位,也就是可调的。没错,px比em更加容易使用,大部分读者不知道em为何物或者它相当于多少 px。国外人士如此重视网站易用性(Accessibility),不仅因为其根生蒂固的
人文精神
,直接原因可能是因 为有一部法律来约束他们—例如美国的
Section 508
,强制网站达到一定的易用性。
关键点
:
1. IE无法调整那些使用px作为单位的字体大小;
2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位;
3. Firefox能够调整px和em,但是96%以上的中国网民使用IE浏览器(或内核)。
px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明 Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。
em有如下特点:
1. em的值并不是固定的;
2. em会继承父级元素的字体大小。
所以我们在写CSS的时候,需要注意两点:
1. body选择器中声明Font-size=62.5%;
2. 将你的原来的px数值除以10,然后换上em作为单位;
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。
但是12px汉字例外,就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,而是稍大一点。这个问 题 Jorux已经解决,只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时,对于浮点的取值精确度有限。不知道有没有 其他的解释。
声明:
本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:
https://www.wpsshop.cn/w/知新_RL/article/detail/98718
推荐阅读
article
程序员
码字用那种
轴
的
键盘
,
敲起来更舒适更快捷
,
我来帮你分析_
程序员
用
什么
轴
的
机械
键盘
...
我不知道别
的
程序员
对于一款舒适
键盘
的
定义是
什么
,
以下仅以我个人
的
衡量标准来说说
什么
是舒适
的
键盘
,
以及为何最终选择L
的
这款...
赞
踩
article
一文看懂未来
技术
趋势
| 开篇词:
AI
工程
(
AI
Engineering
)初探_ai
技术
趋势
和min...
2021年10月,在Gartner公司发布的《2022年十二大重要战略
技术
趋势
》中,将
AI
工程
(
AI
Engineeri...
赞
踩
article
3种
拼接
卫星
影像
的方法_
arcgis
影像
拼接
...
对GIS软件而言,
拼接
栅格图属于很基础的功能,只不过不同的软件操作方法略有不同,这里为大家介绍三款GIS软件:ArcGI...
赞
踩
article
microSD
Expre
s
s
存储卡
格式公布:将
实现
985Mb
/
s
速度...
新浪科技讯 北京时间2月26日早间消息,据美国科技媒体Engadget报道,SD卡协会(SD A
s
s
ociation)公...
赞
踩
article
问题
解决:
multiple
definition
of
XXX...
在编译程序的时候,遇到了一个
问题
,花点时间记录一下:在Qt中创建一个类后,一般是先在.h文件中声明变量与函数,然后在对应...
赞
踩
article
【
C++
航海王
:
追寻罗杰
的
编程之路】
类
与
对象
你学会
了
吗?(下)...
类
是对某一
类
实体(
对象
)来进行描述
的
,描述该
对象
具有那些属性,那些方法,描述完成后就形成
了
一种新
的
自定义
类
型,才用该自定...
赞
踩
article
unity3d
动态添加
地面
贴图
草地...
TerrainData.splatPrototypes = new SplatPrototype[1]{ new Spl...
赞
踩
article
【
BraTS
】
Brain
Tumor Segmentation 脑部
肿瘤
分割
1(数据篇)_脑
肿瘤
分割
...
BraTS
2015数据官方网址:http://www.braintumorsegmentation.org/下载地址:h...
赞
踩
article
ps
基础
介绍
_
ps
介绍
...
PS基础以及
介绍
_
ps
介绍
ps
介绍
1、PS简介 [Adobe Photoshop,简称“PS”...
赞
踩
article
echarts
系列-带图教你
调整
左右
位置
x
轴
样式
网格
虚线
刻度
居中双
轴
Y
轴
滚动
上下移动文字旋转改分割线...
本文已参与「新人创作礼」活动
,
一起开启掘金创作之路。1.饼图怎么
调整
左右
位置
只需要
调整
option.series里
的
ce...
赞
踩
article
ChatGpt
学习
(一)_
chatgpt
的
btrs
...