搜索
查看
编辑修改
首页
UNITY
NODEJS
PYTHON
AI
GIT
PHP
GO
CEF3
JAVA
HTML
CSS
搜索
Gausst松鼠会
这个屌丝很懒,什么也没留下!
关注作者
热门标签
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
【重磅发布】RUFF 公链测试网络正式上线_ruffchain钱包(1.2.3) android版发布
2
python程序如何在其他电脑上运行_Python文件被编译成exe文件并直接在其他windows计算机上运行,其它,Windows,电脑...
3
CH395Q之CH395Q驱动库移植与驱动库分析(二)
4
LCD图片显示、触摸屏、音乐播放、缩放图片和播放视频_lcd屏显示avi动画
5
Ubuntu 20.04 设置开机自启脚本_ubuntu 设置shell 开机自启
6
计算机毕业设计ssm基于Java的校园互助管理信息系统的设计与实现urx239 (附源码)轻松不求人_校园互助平台设计与实现
7
【深度学习】【TensorFlow 】查看Tensorflow和python对应版本、将现有的TensorFlow更新到指定的版本_python 3.9.17 对应的tensorflow
8
【mysql学习篇】分页查询&连接查询索引优化剖析_mysql开发技巧 - 分页和索引
9
Provisioning profile "iOS Team Provisioning Profile:XXXX"doesn't include the currently selected devi_"provisioning profile \"ios team provisioning prof
10
5G用户作被叫未接通问题_nr cell prach failure
当前位置:
article
> 正文
em与px的区别
作者:Gausst松鼠会 | 2024-02-10 14:40:41
赞
踩
em, ren和px的区别
在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理想,ChinaUI等都是使用了px作为字体单位。只有百度好歹做了个可调的表率。而 在大洋彼岸,几乎所有的主流站点都使用em作为字体单位,也就是可调的。没错,px比em更加容易使用,大部分读者不知道em为何物或者它相当于多少 px。国外人士如此重视网站易用性(Accessibility),不仅因为其根生蒂固的人文精神,直接原因可能是因 为有一部法律来约束他们—例如美国的Section 508,强制网站达到一定的易用性。
[b]关键点:[/b]
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作为单位就行了。
[b]em有如下特点:[/b]
1. em的值并不是固定的;
2. em会继承父级元素的字体大小。
[b]所以我们在写CSS的时候,需要注意两点:[/b]
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/Gausst松鼠会/article/detail/74575
推荐阅读
article
docker
-
compose
基本语法_
docker
-
compose
语法...
1
docker
-
compose
.yml 结构
docker
-
compose
.yml文件分为三个主要部分:services...
赞
踩
article
Codeforces
Round
#700 (D
i
v. 2) D1. Pa
i
nt
i
ng
the
Ar...
传送门题目大意有n个数字,可以将他们分别放在两个数组中,数组元素的个数为合并相邻元素相同的值,比如会变成题解贪心的选取,...
赞
踩
article
集
五福
2
python
_
集
五福
python
编程题...
JiFu PACKAGE# 导入随机模块import random# 获取福卡方法def Ji
_
Fu(): # 所有福卡...
赞
踩
article
【
2024
最新版
】我用
python
代码
带你看最绚烂
的
烟花
,浪漫永不过时!_
python
2024
...
我用
python
代码
带你看最绚烂
的
烟花
,浪漫永不过时!_
python
2024
python
2024
...
赞
踩
article
C/
C++
判断
是
否为
素数
(最快)
_
c++
是
素数
吗...
质数又称
素数
。一个大于1的自然数,除了1和它自身外,不能被其他自然数整除的数叫做质数;否则称为合数常规解法,一层for循...
赞
踩
article
docker
(十四):
docker
-
compose
安装以及实例_
doker
compose
1.24
...
一、实现功能1.产生原因从Dockerfile build image 或者 Dockerhub拉取image,或者创建...
赞
踩
article
Midjourney
中 /
show
与
Job
ID
...
Midjourney
提供了多种指令和工具,帮助用户在使用过程中更高效地管理和创作图像。其中,/
show
指令是一个非常有...
赞
踩
article
Python
多线程 中
concurrent
.
futures
模块
使用说明...
Python
中
concurrent
.
futures
模块
使用说明转载请注明出处:https://blog.csdn....
赞
踩
article
一个
比较高效的
素数
判断
算法
_
判断
一种是
素数
的
算法
,
复杂度
要求还是
sqrt
(n)...
一个
比较高效的
素数
判断
算法
高效
素数
判断
算法
算法
概述规则详解
算法
时间
复杂度
复杂度
Python代码实现高效
素数
判断
算法
算法
概...
赞
踩
article
蓝桥
杯
第十四届
javab
组模拟赛题_
qoopzs
...
要最小的字符串,因为都是无限的,所以看前面的字符越小越好,所以主要要解决最小的字符相同的情况,只有一个最小字符就可以确定...
赞
踩
article
python
multiprocessing
dummy
Pool
使用_multiprocessi...
本文内容:
python
multiprocessing
.
dummy
Pool
多线程、进程任务队列使用http压力测试简单...
赞
踩
article
RHCSA
练习题 -
文件
权限
设定
_所
有
其他
用户
(包括当前已
有
用户
及未来创建
的
用户
)
对
该
文件
都
有
读
的
...
ACL,是 Access Control List(访问控制列表)
的
缩写,在 Linux 系统中, ACL 可实现
对
单一...
赞
踩
article
<
em
>前端
em
>
的
那些必须要掌握
的
样式
设置和布局【<
em
>CSS
em
>
、
浮动
、
清除
、
固定
、
em
、
r
em
等等......】_<
em
>前端
em
>...
<
em
>CSS
em
>使用
浮动
、
清除
、
固定
em
、
r
em
<
em
>前端
em
>程序员必须要掌握
的
<
em
>前端
em
>知识父元素没有高度,内容由子元素撑开,子元素
浮动
后,导致...
赞
踩
article
【
Leetcode
】1433.
Check
If
a
String
C
a
n Bre
a
k Anothe...
题目地址:https://leetcode.com/problems/check-if-
a
-string-c
a
n-bre...
赞
踩
article
<
em
>oracle
em
><
em
>19c
em
>启用
em
控制台管理_<
em
>oracle
em
> <
em
>19c
em
>
em
...
从<
em
>oracle
em
>12c开始
em
控制台只需简单启用即可。不过<
em
>19c
em
>
em
只能查看性能页,而12c的
em
包括配置,用户所有功能...
赞
踩
article
一行代码搞定
GPT4.0
禁止
升级
开通
_
现在
不能
升级
gpt4
了吗...
GPT4.0
禁止
升级
了,怎么开通
升级
GPT4.0
_
现在
不能
升级
gpt4
了吗
现在
不能
升级
gpt4
了吗 ...
赞
踩
article
用
通俗易懂
的方式讲解大
模型
:使用
FastChat
部署
LLM
的体验太爽了_
fschat
使用...
FastChat
[2]是一个用于训练、服务和评估基于大型语言
模型
的聊天机器人的开放平台。其核心功能包括:最先进
LLM
...
赞
踩
article
《零
基础
入门
深度
学习
》
学习
笔记(四
)
卷积
神经网络
-代码详解_零
基础
入门
深度
学习
(
4
) -
卷积
神经网...
原文要点梳理:1、最近几年
卷积
神经网络
中,激活函数往往不选择sigmoid或tanh函数,而是选择relu函数:f(x)...
赞
踩
article
详解
Python
多
线程
、
多
进程_
python
适合
多
线程
...
在学习
Python
的过程中,有接触到
多
线程
编程相关的知识点,先前一直都没有彻底的搞明白。今天准备花一些时间,把里面的细节...
赞
踩
article
【Chat
GPT
修改
论文
】【中/英双语】
GPT
论文
指令
合集(润色、语法
修改
、
降重
)_
gpt
降重
口令...
对于我们需要改进的每一段,你需要把所有
修改
过的句子放在Markdown表中,每一列都包含以下内容:完整的原始句子;如果您...
赞
踩
相关标签
docker
docker-compose
python
pygame
开发语言
c++
素数筛
compose
wordpress
network
volums
midjourney
多线程
算法
蓝桥杯
职场和发展
python多进程
HTTP压测
dummy-Pool
linux
运维
服务器
css
前端