CSS中 px、em、rem区别
PX
px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
PX特点
- 1. IE无法调整那些使用px作为单位的字体大小;
- 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;
- 3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。
EM
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
EM特点
- 1. em的值并不是固定的;
- 2. 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作为单位就行了。
所以我们在写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。
REM
rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子:
p {font-size:14px; font-size:.875rem;}
注意: 选择使用什么字体单位主要由你的项目来决定,如果你的用户群都使用最新版的浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者两者同时使用。
px 与 rem 的选择?
对于只需要适配少部分手机设备,且分辨率对页面影响不大的,使用px即可 。
对于需要适配各种移动设备,使用rem,例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。
PT PX EAM之间的换算
pt (point,磅):是一个物理长度单位,指的是72分之一英寸。
px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有DPI可选。Windows系统默认是96dpi,Apple系统默认是72dpi。
em(相对长度单位,相对于当前对象内文本的字体尺寸):是一个相对长度单位,最初是指字母M的宽度,故名em。现指的是字符宽度的倍数,用法类似百分比,如:0.8em, 1.2em,2em等。通常1em=16px。
字号:是中文字库中特有的一种单位,以中文代号表示特定的磅值pt,便于记忆、表述。
pt和px的换算公式可以根据pt的定义得出:
pt = 1/72(英寸), px = 1/dpi(英寸)
因此 pt = px * dpi / 72
以 Windows 下的 96dpi 来计算,1 pt = px * 96/72 = px * 4/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 |
CSS中的应用
在css中单位长度用的最多的是px、em、rem,这三个的区别是:
一、px是固定的像素,一旦设置了就无法因为适应页面大小而改变。
二、em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定死了的,更适用于响应式布局。
三、em是相对于其父元素来设置字体大小的,一般都是以<body>的“font-size”为基准。这样就会存在一个问题,进行任何元素设置,都有可能需要知道他父元素的大小。而Rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个参考值。
总之:对于em和rem的区别一句话概括:
em相对于父元素,rem相对于根元素。
一、em
(一)子元素字体大小的em是相对于父元素字体大小
(二)元素的width/height/padding/margin用em的话是相对于该元素的font-size
上代码:
html:
<div>父元素div<p>子元素p<span>孙元素span</span></p>
</div>
css:
div {font-size: 40px;width: 7.5em; /* 300px */height: 7.5em;border: solid 2px black;}p {font-size: 0.5em; /* 20px */width: 7.5em; /* 150px */height: 7.5em;border: solid 2px blue ;color: blue;}span {font-size: 0.5em;width: 7em;height: 6em;border: solid 1px red;display: block;color: red;}
结果如图:
二、rem
rem是全部的长度都相对于根元素,根元素是谁?<html>元素。通常做法是给html元素设置一个字体大小,然后其他元素的长度单位就为rem。
上代码:
html:
<div>父元素div<p>子元素p<span>孙元素span</span></p>
</div>
css:
html {font-size: 10px;}div {font-size: 4rem; /* 40px */width: 20rem; /* 200px */height: 20rem;border: solid 2px black;}p {font-size: 2rem; /* 20px */width: 10rem;height: 10rem;border: solid 1px blue;color:blue ;}span {font-size: 1.5rem;width: 7rem;height: 6rem;border: solid 2px red;display: block;color: red;}
结果如图:
总结一
在做项目的时候用什么单位长度取决于你的需求,我一般是这样的:
1、像素(px):用于元素的边框或定位。
2、em/rem:用于做响应式页面,不过我更倾向于rem,因为em不同元素的参照物不一样(都是该元素父元素),所以在计算的时候不方便,相比之下rem就只有一个参照物(html元素),这样计算起来更清晰。
总结二
1、rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。
2、em 单位基于使用他们的元素的字体大小。
3、rem 单位基于 html 元素的字体大小。
4、em 单位可能受任何继承的父元素字体大小影响
5、rem 单位可以从浏览器字体设置中继承字体大小。
6、使用 em 单位应根据组件的字体大小而不是根元素的字体大小。
7、在不需要使用em单位,并且需要根据浏览器的字体大小设置缩放的情况下使用rem。
8、使用rem单位,除非你确定你需要 em 单位,包括对字体大小。
9、媒体查询中使用 rem 单位
10、不要在多列布局中使用 em 或 rem -改用 %。
11、不要使用 em 或 rem,如果缩放会不可避免地导致要打破布局元素。
需要注意的是:
样式的reset中需先设置html字体的初始化大小为50px,这是为了防止js被禁用或者加载不到或者执行错误。
而做的兼容样式的reset中需先设置body字体的初始化大小为16px,这是为了让body内的字体大小不继承父级html元素的50px,而用系统默认的16px
CSS中 px、em、rem区别相关推荐
- CSS单位--px,em,rem,rpx区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? Px PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够 ...
- 认识css长度单位 px % em rem vh vw
目录 长度单位 px % em rem vh.vw 总结 长度单位 在日常的项目开发,在使用css样式进行时布局的时候,我们常常用到px.%.em这三个单位.CSS3开始,浏览器新增加了rem.vh. ...
- 深究--CSS中px、rem与em的区别
前言:随着PC端的网页盛行,移动端作为重要的一部分,也是火热的发展,但是鉴于一些单位的使用,我们并不知道该怎样去使用,那么今天我们来看看常用的三种单位PX.rem与em. 目录: 一.PX 1.概念: ...
- px/em/rem区别
px是相对于屏幕分辨率的单位.em rem 是相对于元素的单位 vw 是屏幕的宽度/浏览器的宽度
- css中px、em和rem的区别总结
前言 em 和 rem 都是灵活可扩展的单位,由浏览器转换为像素值,取决于设计中的字体大小,如果使用值 1em 或 1rem ,它可以被浏览器转换为从 16px 到 160px 或其他任意值.浏览器使 ...
- CSS 中px、em、rem、%、vw、vh单位之间的区别详解【全网最全】
一.px(像素) [绝对单位,页面按精确像素展示] px就是pixel(像素)的缩写,相对长度单位,相对于屏幕分辨率. px表示像素 (计算机屏幕上的一个点:1px = 1/96in),是绝对单位,不 ...
- css中的单位换算_css大小单位px em rem的转换和详解
css大小单位px em rem的转换和详解 PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firef ...
- Css单位px,rem,em,vw,vh的区别
Css单位px,rem,em,vw,vh的区别 px 像素 rem 根元素字体大小 应用场景 使用和修改 em 相对于父元素的大小 % 相对长度单位 vw.vh 相对于视口的单位 视口 VW 相对于视 ...
- html 字号和像素的关系,一文搞懂CSS中的字体单位大小(px,em,rem...)
在学习的过程中,发现CSS有很多可以形容单位的尺寸.比方px,em,rem,vw等等.平常也没有深究,一来是没时间,二来是在我学习清单中优先级过低.一直想彻底弄明白,一直耽搁到现在.现在花上一点时间来 ...
- px,em,rem,vh,vw,vmin,vmax的区别
css手册中关于font-size是这么介绍的: font-size 值可以是绝对或相对值. 绝对值: 将文本设置为指定的大小 不允许用户在所有浏览器中改变文本大小(不利于可用性) 绝对大小在确定了输 ...
最新文章
- 不同模块下包重名怎么解决_模块
- sdut 3333 数据结构实验之栈与队列六:下一较大值(二)
- java protobuf 例子_用Maven实现一个protobuf的Java例子
- 【渝粤教育】国家开放大学2018年春季 0675-21T中级财务会计(2) 参考试题
- Arbitrage——判断正环Bellman-Ford/SPFA
- 服务器应用日志清理,Linux下Tomcat日志定期清理
- JavaScript学习笔记(一)--JS基础【入门必看】
- python异常信息中最重要的部分是_Python中获取异常(Exception)信息
- 反序列化对象列表发生异常_面试官:你知道Java对象的序列化与反序列化背后的原理吗?...
- SSM框架01--springmvc
- 小米 秋招 笔试 编程题 句子反转
- Android7.0(mtk)开放root权限,adb root和app root
- 抖音短视频直播电商企业号IP运营操盘商业计划书方案pdf
- 2019年云化国际发展趋势_2019年3种令人惊讶的云趋势-您首先在这里听到了
- 半加器——Verilog HDL语言
- echarts找到china地图( npm i --save echarts/map/js/China)
- 《常识:有用的无用的百科知识》新书相赠!
- 【开发指南】AR Foundation 开发环境部署
- Python初学者图形绘制
- 隐藏win32控制台程序的窗口
热门文章
- 免登陆从Oracle下载Java SE
- iOS解决UITableView头部和底部出现空白间隙的折腾
- echarts 添加百分号
- 多元线性回归算法: 线性回归Linear Regression、岭回归Ridge regression、Lasso回归、主成分回归PCR、偏最小二乘PLS
- G6信息门户连接不上服务器,G6客户端提示找不到服务器怎么回事 网是通 的
- NLP自然语言处理-英文文本电影影评分类2-pytorch版本
- java、redis、mysql归纳总结
- linux下分析webmail代码,Atmail Webmail Client多个HTML代码注入漏洞
- 【数据处理脚本】RA-CNN模型数据集处理及训练出现的报错解决
- (转)编程的三层境界——器、术、道