说说css中pt、px、em、rem都扮演了什么角色

简介:

前段时间,终于仔仔细细的把pt、px、em、rem了解了一遍,特意将其相关内容整理成文章,希望能对有需要的人有所帮助。

pt、px、em、rem都是什么

pt单位名称为点(Point),绝对长度单位。现在网页中出现得很少甚至不出现,常用于印刷行业。
单位换算:1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

px单位名称为像素,相对长度单位,像素px是相对于显示器屏幕分辨率而言的。像素的使用性特别广。

em单位名称为相对长度单位。它没有一个固定数值,相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。

rem是CSS3新增的一个相对单位(root em,根em), rem是相对单位,是相对HTML根元素。

四者的特点和关系

pt是一个标准的长度单位, 1pt=1/72英寸,常用于印刷当中,在AI、PS等设计软件当中字体大小所用的单位就是pt,它在广告印刷业当中十分受欢迎,也非常的好用。但现在在网页当中,pt几乎不出现了。
优点:适用于印刷业
缺点:网页几乎不用了

px是屏幕上显示的最小单位,所以在网页当中非常受欢迎,因为精准也非常的直观和方便。一些设计类也会使用到px。
优点:精确稳定
缺点:在浏览器中放大或缩小页面后,页面会出现混乱的情况

em这个单位就比较强大了,它是个相对长度单位,拥有着可变的弹性特征。这个单位也受到大部分前端设计师的喜爱,因为是相对数值,所以我们可以设置1em、0.5em、0.25em等,且支持到小数点后三位数,页面也会随页面的放大缩小而做相对应的调整。
优点:灵活变化
缺点:会继承父级元素的字体大小

rem这个单位相比em更强大,可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就可以成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。 目前,除了IE8及更早版本外,所有浏览器均已支持rem。
优点:更加灵活人性化,不受父级元素影响

缺点:。。。原谅我暂时想不出来


pt和px的区别

pt和px其实都有被应用于印刷业当中,在web或app中,px更精准,设置后就不会改变。而pt可能会根据显示器的像素密度会有所改变,因为px是相对单位,pt是绝对单位。
大家在做网页或者app,都是为了浏览,所以比较建议大家使用px来定义字号。使用px定义文字,无论用户怎么设置,都不会改变大小;使用pt定义文字,当用户设置超过96DPI的值,数值越大,字体就越大。
转化公式: px = pt * DPI / 72

em和rem的区别

我以前用em做网站,觉得哇!这个元素真好用。后来发现rem,更是觉得发现宝藏一样,比em更好用。em和rem其实都是灵活的,因为它们都是一个相对单位,可灵活、可扩展的单位。一般都是由浏览器转换成具体像素值,具体转化后的数值取决与设置的字体大小。


可以说这两个单位都可以使我们的web或app界面设计更灵活,既然这两者都可以达到一样的效果,那具体区别在哪里呢?
  • rem 单位翻译为像素值是由 html 元素的字体大小决定的。 此字体大小会被浏览器中字体大小的设置影响,除非显式重写一个具体单位。
  • em 单位转为像素值,取决于他们使用的字体大小。 此字体大小受从父元素继承过来的字体大小,除非显式重写与一个具体单位。


如何换算

以前一直用px,后来在做自适应的时候就会发现很多问题。直到发现了em和rem,简直让人欣喜若狂。但是px和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。

脑筋转得慢的或者偷懒的跟我一样用工具换算吧。 http://pxtoem.com/

1Q3KnCMc5UbKFN.gif
相关文章
|
1月前
|
编解码 前端开发 UED
解密CSS单位:px、em、vh的区别与应用
解密CSS单位:px、em、vh的区别与应用
72 0
|
14天前
|
编解码 前端开发 UED
解密CSS单位:px、em、vh的区别与应用
解密CSS单位:px、em、vh的区别与应用
13 1
|
11天前
|
前端开发 UED 开发者
CSS基础-属性值单位:px, em, rem, %
【6月更文挑战第7天】本文探讨了CSS中四种关键的尺寸单位:像素(px)、相对单位(em)、rem和百分比(%)。px提供稳定显示但不适用于响应式设计;em根据上下文动态调整,但嵌套使用可能导致计算复杂;rem简化了嵌套计算,适合作为响应式设计的选择;%用于流体布局,但可能在复杂结构中引起不稳定。理解各单位特性并结合现代布局技术,能提升网页布局的美观性和用户体验。
|
前端开发
CSS3中的Rem值与Px之间的换算
bootstrap默认 html{font-size: 10px;}   rem是一个相对大小的值,它相对于根元素, 比如假设,我们设置html的字体大小的值为html{font-size: 87.5%;}(也就是14px)。
902 0
|
20天前
|
编解码 前端开发
编写代码中常见问题汇总(html和css)
编写代码中常见问题汇总(html和css)
25 0
|
4天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
4天前
|
缓存 前端开发 JavaScript
从HTML、CSS以及其他方面介绍一些移动端网页性能优化的策略
【6月更文挑战第14天】本文探讨了移动端网页性能优化的重要性,并提出了HTML、CSS及其他方面的优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件。CSS优化包括简化样式、利用CSS3动画、媒体查询及压缩文件。其他策略涉及图片和字体优化、缓存利用、压缩传输数据、减少HTTP请求及监听网络状态。通过这些方法,可提升网页性能,改善用户体验。
10 1
|
4天前
|
缓存 移动开发 前端开发
在PWA的开发中,HTML与CSS作为前端技术的基础,发挥着至关重要的作用
【6月更文挑战第14天】PWA(渐进式网页应用)借助HTML和CSS,提供接近原生应用的体验。HTML构建页面结构和内容,响应式设计适应各种设备,语义化标签提升可访问性,Manifest文件配置应用元数据,离线页面保证无网时体验。CSS则用于定制主题样式,创建动画效果,实现响应式布局,并管理字体和图标。两者协同工作,确保PWA在不同环境下的优秀性能和用户体验。随着前端技术进步,HTML与CSS在PWA中的应用将更加深入。
18 2
|
6天前
|
前端开发 数据安全/隐私保护
紫色渐变登陆布局html+css代码
这是一段关于网页设计的代码示例,使用纯CSS实现了登录界面的样式。HTML部分包括一个简单的登录表单,包含用户名、密码输入框和登录、注册按钮。CSS部分则定义了各种元素的样式,如背景色、边框、字体颜色等,并使用渐变效果和过渡动画来增强视觉效果。整个设计采用了响应式布局,适应不同设备的屏幕宽度。
16 0
|
6天前
|
前端开发 数据安全/隐私保护 容器
简约渐变色登陆布局html+css代码
这是一段包含HTML和CSS代码的摘要。HTML部分定义了一个基本的网页结构,包括`<html>`、`<head>`、`<body>`标签,以及一个简单的登录界面,由一个容器`.container`包含一个登录框`.login-wrapper`,登录框内有输入框和登录按钮。CSS部分设置了全局样式,如字体、边距,并为HTML元素添加了样式,如背景渐变色、文字对齐、输入框和按钮的样式等。整个代码展示了创建一个具有响应式布局和特定视觉效果的简洁登录页面。
14 0