`
fanfanlovey
  • 浏览: 74043 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

px、pt、em、rem区别

    博客分类:
  • HTML
阅读更多
px(像素) 相对长度单位
这个应该是国内使用较多的单位,意思为像素,是你屏幕设备物理上能显示出的最小的一个点,这个点不是固定宽度的.不同设备上点的长宽、比例有可能会不同。例如,将显示器分成非常细小的方格,每个方格就是一个像素。表面上看好像很容易理解,实际上,px的具体大小是受到屏幕的分辨率影响的,也就是和划分屏幕各自的方式有关。例如,同样是100px大小的字体,如果显示器使用800×600像素的分辨率,那么,每个字的宽度是屏幕的1/8。若将显示器的分辨率设置为1024×768像素,那么同样是100px字体的字,其宽度就越为屏幕宽度的1/10。

  • 1. IE无法调整那些使用px作为单位的字体大小;
  • 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;
  • 3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。



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作为单位就行了。


  • 1. em的值并不是固定的;
  • 2. em会继承父级元素的字体大小。


rem   相对长度单位
rem是CSS3新增的一个相对单位,这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是
一个例子:
p {font-size:14px; font-size:.875rem;}

pt  绝对长度单位
pt使用的并不多,pt的效果是不随浏览器分辨率的变化而法神视觉的变化,永远看起来一样大

最后提供一个方便的转换工具:http://pxtoem.com/
分享到:
评论

相关推荐

    css中的px、em、rem、pt 特点和区别及换算详解

    在CSS中,像素(px)、em、rem和pt是四种常用的长度单位,它们各自具有不同的特点和用途。了解这些单位的特点和区别对于创建响应式和适应不同设备的网页设计至关重要。 1. **像素(px)**: 像素是CSS中最基本的...

    详解CSS3 rem(设置字体大小) 教程

    在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK大局。...

    css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况

    CSS3中的长度单位用于表示网页中元素的尺寸、间距、位置等属性,主要包括像素单位(px)、相对长度单位(em、rem)、视口单位(vh、vw、vmin、vmax)以及其它一些单位(如%、in、cm、mm、pt、pc、ex、ch等)。以下是对这些...

    前端大厂面试思维导图-css面试

    前端大厂面试题目思维导图,非常全面,包含了常见的面试题目,0.5px的线如何实现,sass的常用功能,弹性布局flex-direction,justify-content,align-items,css常见单位rpx、px、em、rem、%、vh、vw的区别,垂直...

    javascript用rem来做响应式开发

    REM(Root EM)是CSS3中引入的一个长度单位,它相对于根元素(通常是html元素)的font-size来计算,而不是相对于父元素。这种方法允许我们通过调整根元素的font-size来改变整个页面的比例,从而适应不同大小的屏幕。...

    JavaScript中rem布局在react中的应用

    前面给大家分享了一个react项目(//www.jb51.net/article/76085.htm),这次对这个项目做了一些改进,增加了rem布局和对iscroll在Android上的优化。...cli&&(cli=2),doc.style.fontSize=16*cli+px); } font

    css 字体单位之间的区分以及字体响应式的实现详解

    ////以下用的比较少//////1em = 12pt1px = 3/4 pt = 0.75pt1pt = 1/12 em 0.0833em1pt = 4/3 px = 1.3333px 2.任意浏览器默认字体都是16px。所有未经调整的浏览器默认尺寸为 1em=16px 3.chrome强制最小字体为12px,...

    px:将标准 CSS 测量值转换为像素单位的 jQuery 插件

    jQuery.px 版本 1.2 版权所有 (c) 2011-2015 Martijn W.... px、in、cm、mm、pt、pc(无上下文) em, ex, rem, ch(使用上下文) vw、vh、vm、vmin、vmax(无上下文) vd(没有上下文,不是 CSS

    HTML5+CSS3 文字阴影和阴影位移.docx

    阴影位移通常用像素(px)作为单位,但也可以使用其他长度单位,如em、rem、pt等。em单位是相对长度单位,基于父元素的字体大小。例如,`0.1em`表示当前文本字体大小的10%位移。在示例中,`h1`标签的阴影位移为`0.1...

    举例详解CSS中的字体尺寸设置

    - **默认设定**:大多数浏览器的默认字体尺寸是100%,相当于1em,1rem,16px和12pt。这意味着这些单位在初始状态下具有相同的视觉效果。 - **绝对与相对**:通过改变的字体尺寸,所有使用相对单位的子元素(如)都会...

    小程序预加载数据实战.doc

    此外,calc() 函数也支持不同单位的混合运算,对于长度,只要是属于长度相关的单位都可以进行混合运算,包含 px、%、em、rem、in、mm、cm、pt、pc、ex、ch、vh、vw、vmin、vmax 等。 需要注意的是,calc() 函数的...

    CSS表单下命令的用法

    - 常见的单位有`pt`、`px`、`em`、`rem`等。 - 在网页设计中,建议使用相对单位如`em`或`rem`,以提高响应式布局的灵活性。 #### 2. 内边距(`padding`)和外边距(`margin`) - **定义**: - `padding`属性...

    CSS中的字体大小设置属性总结

    在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EMS优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK大局。...

    浅谈CSS中的尺寸单位

    在CSS中,尺寸单位是控制元素尺寸、位置和间距的关键元素。...同时,使用em和rem可以实现与字体大小相关的元素尺寸调整,使设计更加可访问和可扩展。在实际开发中,根据项目需求和目标设备选择合适的单位是至关重要的。

    Web-前端教程04 绝对还是相对大小.zip

    绝对大小是指在CSS中直接指定一个具体的数值,如像素(px)、点(pt)或英寸(in)等单位,来定义元素的尺寸。这种方式可以确保元素在不同设备和屏幕分辨率下保持一致的显示效果。例如: ```css div { width: 200...

    Web程序开发:第9章 CSS基础.pptx

    在实践中,常用的是em、rem、px和百分比(%)来定义元素尺寸。 - `px`:像素单位,不可变。 - `em`:相对于当前元素字体尺寸的单位,可变。 - `rem`:相对于根元素字体尺寸的单位,可变。 - `%`:百分比,相对于父...

    html、css网页制作收藏、颜色表、css单位

    CSS单位有很多种,包括绝对单位(如像素px,英寸in,厘米cm)和相对单位(如百分比%,em,rem)。像素是屏幕上的基本显示单元,通常用于精确布局;百分比常用于元素的宽度和高度,使其相对于父元素的大小;em和rem是...

Global site tag (gtag.js) - Google Analytics