css单位em、px、rem和pt的区别

1、PX :像素(Pixel) 
PX是相对长度单位,它是相对于显示器屏幕分辨率而言的。 
优缺点:比较稳定和精确,但在浏览器中放大或缩放浏览页面时会出现页面混乱的情况。

2、EM:是相对长度单位。 
EM是相对于父元素来设计字体大小的。如果当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。 
优缺点:EM的值并不是固定的,它会继承父级元素的字体大小。

EM和PX的之间的相互转换: 
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。 
为了使用方便,用em时,我们通常在CSS中的body选择器中声明font-size=62.5%(使em值变为 16px*62.5%=10px), 之后,你只需要将你使用的px值除以10,即可得到em值,如:12px=1.2em, 10px=1em。

3、REM :是CSS3新增的一个相对单位(root em,根em) 
REM是相对单位,是相对HTML根元素。 
这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。 目前,除了IE8及更早版本外,所有浏览器均已支持rem。

4、PT :印刷业上常使用的单位 
PT是磅的意思,一般用于页面打印排版。

时间: 2024-11-03 22:07:29

css单位em、px、rem和pt的区别的相关文章

CSS中px,em,rem,pt的区别及四者换算?

本文章重要说明px,em,rem,pt的区别以及四者之间的换算. em单位有如下特点 1. em的值并不是固定的; 2. em会继承父级元素的字体大小. 我们在写CSS的时候如果要用em为单位,需要注意两点: 1. body选择器中声明Font-size=62.5%; 2. 将你的原来的px数值除以10,然后换上em作为单位; 3. 重新计算那些被放大的字体的em数值.避免字体大小的重复声明. 也就是避免1.2 * 1.2= 1.44的现象.比如说你在#content中声明了字体大小为1.2em

css单位中px和em,rem的区别

css单位中分为相对长度单位.绝对长度单位. 今天我们主要讲解rem.em.px这些常用单位的区别和用法. px(绝对长度单位) 相信对于前端来说px这个单位是大家并不陌生,px这个单位,兼容性可以说是相当可以,大家对px的了解肯定是没有很大的问题的. em(相对长度单位) 使用:1.浏览器的默认字体都是16px,那么1em=16px,以此类推计算12px=0.75em,10px=0.625em,2em=32px: 2.这样使用很复杂,很难很好的与px进行对应,也导致书写.使用.视觉的复杂(0.

css中单位em和rem

一.介绍 1.em w3cschool中给出css中尺寸单位如下: 单位 描述 % 百分比 in 英寸 cm 厘米 mm 毫米 em 1em 等于当前的字体尺寸. 2em 等于当前字体尺寸的两倍. 例如,如果某元素以 12pt 显示,那么 2em 是24pt. 在 CSS 中,em 是非常有用的单位,因为它可以自动适应用户所使用的字体. ex 一个 ex 是一个字体的 x-height. (x-height 通常是字体尺寸的一半.) pt 磅 (1 pt 等于 1/72 英寸) pc 12 点活

css中em和rem的区别

在css中单位长度用的最多的是px.em.rem,这三个的区别是:1.px是固定的像素,一旦设置了就无法因为适应页面大小而改变.2.em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定死了的,更适用于响应式布局. 对于em和rem的区别一句话概括:em相对于父元素,rem相对于根元素.rem中的r意思是root根. em:1.子元素字体大小的em是相对于父元素字体大小2.元素的width/height/padding/margin用em的话是相对于该元素的font-size

分清CSS的em和rem

在css中单位长度用的最多的是px.em.rem,这三个的区别是: px是固定的像素,一旦设置了就无法因为适应页面大小而改变. em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定死了的,更适用于响应式布局. 对于em和rem的区别一句话概括:em相对于父元素,rem相对于根元素. rem中的r意思是root(根源),这也就不难理解了. em 子元素字体大小的em是相对于父元素字体大小 元素的width/height/padding/margin用em的话是相对于该元素的fo

px、em、rem三者之间的区别

px.em.rem都是计量单位,都能表示尺寸,但是有有所不同,而且其各有各的优缺点. Px表示“绝对尺寸”(并非真正的绝对),实际上就是css中定义的像素(此像素与设备的物理像素有一定的区别,后续详细说明见文末说明1),利用px设置字体大小及元素宽高等比较稳定和精确.Px的缺点是其不能适应浏览器缩放时产生的变化,因此一般不用于响应式网站. em表示相对尺寸,其相对于当前对象内文本的font-size(如果当前对象内文本的font-size计量单位也是em,则当前对象内文本的font-size的参

CSS中关于字体大小的定义 em px rem pt %

关于em 所有浏览器的默认字体大小都是16px,所以未经调整的浏览器在显示1em=16px.换算过来的话也就是说1px=0.0625em,也就是12px=0.75em, 10px=0.625em,为了简化font-size的换算,大家可以在css中的body中先全局声明font-size=62.5% ,16px*62.5% =10px; 即把默认字体大小设置为10px;这样的话1em = 10px; 此外有一点必须要注意,可能是IE处理汉字时,对于浮点的取值精确度有限,在body下62.5%出来

CSS中em、rem和px的区别

任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=16px,1rem=16px. EM特点  1. em的值并不是固定的: 2. em会继承父级元素的字体大小. rem特点 rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注.这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素.这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又

相对单位em、rem

案例如下 原文地址:https://www.cnblogs.com/yangyutian/p/11015939.html