css中的px、em、rem 详解
概念介绍:
1、px (pixel,像素):
是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有DPI可选。Windows系统默认是96dpi,Apple系统默认是72dpi。
2、em(相对长度单位,相对于当前对象内文本的字体尺寸):
是一个相对长度单位,最初是指字母M的宽度,故名em。现指的是字符宽度的倍数,用法类似百分比,如:0.8em, 1.2em,2em等。通常1em=16px。
3、pt (point,磅):
是一个物理长度单位,指的是72分之一英寸。pt=1/72(英寸), px=1/dpi(英寸)
4、rem(root em,根em):
是CSS3新增的一个相对单位,这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
1、em与px的问题
px是何物?
px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册) em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(引自CSS2.0手册) PX特点
- IE无法调整那些使用px作为单位的字体大小;
- 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;
- Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。
em是何物?
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特点:
1em指的是一个字体的大小,它会继承父级元素的字体大小,因此并不是一个固定的值。任何浏览器的默认字体大小都是16px。因此,12px = 0.75em。实际应用中为了方便换算,通常会如下设置样式: CSS代码
html { font-size: 62.5%; }
复制代码
这样,1em = 10px。我们常用的1.2em理论上就是12px。但是,这个换算在IE浏览器下不成立,1.2em会比12px稍大一些,解决办法是把html标签样式中的62.5%改成63%,即: CSS代码
html { font-size: 63%; }
复制代码
在 中文的文章中,一般会在段首空两格。如果用px作为单位,对12px字体来说需要空出24px,对14px字体来说需要空出28px……这样换算非常不通 用。如果用上em单位,这个问题就很好解决了,1个字的大小就是1em,那两个字的大小就是2em。因此,只需这样定义就行了: CSS代码
p { text-indent: 2em; }
复制代码
em和px两种字体单位的区别
字体单位应该用em而不用px,原因简单来说就是支持IE6下的字体缩放,在页面中按ctrl+滚轮,字体以px为单位的网站没有反应。px是绝对单位,不支持IE的缩放,em是相对单位。 我在调整本blog的时候,发现不仅仅是字体,将行距(line-height),和纵向高度的单位都用em。保证缩放时候的整体性。
em有如下特点:
- em的值并不是固定的;
- em会继承父级元素的字体大小。
em重写步骤:
- body选择器中声明Font-size=62.5%;
- 将你的原来的px数值除以10,然后换上em作为单位; 简 单吧,如果只需要以上两步就能解决问题的话,可能就没人用px了。经过以上两步,你会发现你的网站字体大得出乎想象。因为em的值不固定,又会继承父级 元素的大小,你可能会在content这个div里把字体大小设为1.2em, 也就是12px。然后你又把选择器p的字体大小也设为1.2em,但如果p属于content的子级的话,p的字体大小就不是12px,而是1.2em= 1.2 * 12px=14.4px。这是因为content的字体大小被设为1.2em,这个em值继承其父级元素body的大小,也就是16px * 62.5% * 1.2=12px, 而p作为其子级,em则继承content的字体高,也就是12px。所以p的1.2em就不再是12px,而是14.4px。
- 重新计算那些被放大的字体的em数值。避免字体大小的重复声明,也就是避免以上提到的1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。
IE中的12px汉字:
完成 em转换时还发现了一个诡异的现象,就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,而 是稍大一点。你只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时,对于浮点的取值精确度有 限。本现象只发生在12px的汉字,英文不存在此现象。解决方法就是把style.css中的62.5%换 为63%。
一个px、em、pt单位转换工具:
地址:pxtoem.com/
2、rem特点
rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。 举例:
p {font-size:14px; font-size:.875rem;}
复制代码
注意: 选择使用什么字体单位主要由你的项目来决定,如果你的用户群都使用最新版的浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者两者同时使用。
3、字体换算表
字号 | pt | px | em |
---|---|---|---|
初号 | 42pt | 56px | 3.5em |
小初 | 36pt | 48px | 3em |
34pt | 45px | 2.75em | |
32pt | 42px | 2.55em | |
30pt | 40px | 2.45em | |
29pt | 38px | 2.35em | |
28pt | 37px | 2.3em | |
27pt | 36px | 2.25em | |
一号 | 26pt | 35px | 2.2em |
25pt | 34px | 2.125em | |
小一 | 24pt | 32px | 2em |
二号 | 22pt | 29px | 1.8em |
20pt | 26px | 1.6em | |
小二 | 18pt | 24px | 1.5em |
17pt | 23px | 1.45em | |
三号 | 16pt | 22px | 1.4em |
小三 | 15pt | 21px | 1.3em |
14.5pt | 20px | 1.25em | |
四号 | 14pt | 19px | 1.2em |
13.5pt | 18px | 1.125em | |
13pt | 17px | 1.05em | |
小四 | 12pt | 16px | 1em |
11pt | 15px | 0.95em | |
五号 | 10.5pt | 14px | 0.875em |
10pt | 13px | 0.8em | |
小五 | 9pt | 12px | 0.75em |
8pt | 11px | 0.7em | |
六号 | 7.5pt | 10px | 0.625em |
7pt | 9px | 0.55em | |
小六 | 6.5pt | 8px | 0.5em |
七号 | 5.5pt | 7px | 0.4375em |
八号 | 5pt | 6px | 0.375em |
转载于:https://juejin.im/post/5c09ee54518825477c16fd8b
css中的px、em、rem 详解相关推荐
- 我应该在CSS中使用px或rem值单位吗?
本文翻译自:Should I use px or rem value units in my CSS? I am designing a new website and I want it to be ...
- 网页布局中的 px,em,rem,pt
网页布局中的 px,em,rem,pt 设备像素:也叫物理像素,显示设备上最微小的物理部件. 比如 iphone 5:640 x 1136px. 不同的机型有不同的设备像素,固定死的. 这里需要讲一下 ...
- php中li标签,li标签有哪些属性?css中li标签的属性详解
在html中,我们经常会遇到li标签,那么li标签有哪些属性?下面我们来了解一下css中li标签的属性. 一:标签有哪些属性 在html中,使用css中li标签来控制样式,很多网站上都是点为开头,也有 ...
- html怎么设置左偏移量,CSS中margin属性的偏移量详解(代码示例)
本篇文章给大家介绍一下CSS中margin属性的偏移量,有感兴趣的朋友可以看一看. 话不多说,我们直接进入正题~ 我们先来看一个具体的例子(相关推荐:CSS学习手册) 代码入下:HTML文件和CSS文 ...
- css 单位之px , em , rem
px : Pixel像素单位.像素是相对显示器分辨率而言.em : 相对长度单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px).rem : 相对单 ...
- css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. rem:相对 ...
- HTML中z index属性是用来,css中z-index 属性与用法详解
Z-index属性决定了一个HTML元素的层叠级别.元素层叠级别是相对于元素在Z轴上(与X轴Y轴相对照)的位置而言.一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部.这个层叠顺序沿着垂 ...
- CSS中clip-path属性的使用详解
CSS clip-path 属性 属性定义及使用说明 clip-path 属性使用裁剪方式创建元素的可显示区域.区域内的部分显示,区域外的隐藏.可以指定一些特定形状. 语法:clip: clip-so ...
- css中的单位换算_css大小单位px em rem的转换和详解
css大小单位px em rem的转换和详解 PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firef ...
- html 字号和像素的关系,一文搞懂CSS中的字体单位大小(px,em,rem...)
在学习的过程中,发现CSS有很多可以形容单位的尺寸.比方px,em,rem,vw等等.平常也没有深究,一来是没时间,二来是在我学习清单中优先级过低.一直想彻底弄明白,一直耽搁到现在.现在花上一点时间来 ...
最新文章
- 【Java】LeetCode 876 获取链表中间节点
- python爬虫实例-记录一次简单的Python爬虫实例
- i2s传输中左右声道数据格式
- transepose 矩阵的转置
- c++ list容器获取第n给元素_深入Python(17)-List 的 append 和 pop
- 汇编对sp指针进行修改_从汇编理解函数调用的过程
- 第 45 届国际大学生程序设计竞赛(ICPC)亚洲区域赛(昆明) Stone Games
- java kettle6_java 调用kettle 6.1 转换
- ubuntu的磁盘扩容
- 详解 Ops 智能运维机器人,故障处理又快又准!
- 逐步认识C#四种判断相等的方法
- 搜狐Linux运维工程师面试真题曝光
- java poi 自动行高_POI设置单元格自动行高(思路)
- 初中计算机 课题研究,初中信息技术的教研课题题目
- php+mysql实现简易博客系统
- 取消Word自动首字母大写步骤
- 认知服务调用如何使用图片的DataURL
- 计算机员工信息登录表的论文,企业员工信息管理系统(论文+程序)
- 20135203齐岳 信息安全系统设计基础第四周学习总结
- 电磁场仿真试验【Matlab】电磁波极化仿真