说说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/
说说css中pt、px、em、rem都扮演了什么角色的更多相关文章
- css大小单位px em rem的转换和详解
css大小单位px em rem的转换和详解 PX特点1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位:3. Firefox能 ...
- css中单位px,em,rem和vh/vw的理解
>px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认 ...
- CSS尺寸单位 % px em rem 详解
在CSS中,尺寸单位分为两类:相对长度单位和绝对长度单位.相对长度单位按照不同的参考元素,又可以分为字体相对单位和视窗相对单位.字体相对单位有:em.ex.ch.rem:视窗相对单位有:vw.vh.v ...
- 搞清css的单位 px,em,rem的区别
前言:现在上大街一眼望去,基本上90%的人都拿着手机,走路,逛街,吃东西都不停着,所以对于我们这种前端开发的程序猿来说,让网页适应于移动端可以说是必须要满足的.所以最近也是一直在学习和实践.然后就接触 ...
- css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
原文地址: http://blog.csdn.net/jyy_12/article/details/42557241 px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果 ...
- CSS3中的px,em,rem,vh,vw辨析
1.px:像素,精确显示 2.em:继承父类字体的大小,相当于"倍",如:浏览器默认字体大小为16px=1em,始终按照div继承来的字体大小显示,进场用于移动端 em换算工具:h ...
- CSS3中的px,em,rem,vh,vw
1.px:像素,精确显示 2.em:继承父类字体的大小,相当于“倍”,如:浏览器默认字体大小为16px=1em,始终按照div继承来的字体大小显示,进场用于移动端 em换算工具:http://www. ...
- css 单位之px , em , rem
px : Pixel像素单位.像素是相对显示器分辨率而言.em : 相对长度单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px).rem : 相对单 ...
- css中的px、em、rem 详解
概念介绍: 1.px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时 ...
随机推荐
- 使用IGP和BGP的配合达到降低路由容量目的的实验与总结
概述 1.先说结论,通过eBGP协议,可以显著降低对非核心路由器的路由容量要求,因为核心路由器的数量明显少于非核心路由器,所以,通过此措施即联通网络,又降低设备要求,非常适宜大型网络. 2.因为网络规 ...
- 前端要革命?看我在js里写SQL
在日新月异的前端领域中,前端工程师能做的事情越来越多,自从nodejs出现后,前端越来越有革了传统后端命的趋势,本文就再补一刀,详细解读如何在js代码中执行标准的SQL语句 为什么要在js里写SQL? ...
- webpack-dev-server配置指南(使用webpack3.0)
最近正在研究webpack,听说webpack可以自己搭建一个小型的服务器(使用过vue-cli的朋友应该都见识到过),所以迫不及待的想要尝试一下.不过,在实际操作中发现,用webpack搭建服务器仍 ...
- 吐槽CSDN--想钱想疯了--阅读全文需要关闭广告屏蔽
吐槽CSDN 想钱想疯了–阅读全文需要关闭广告屏蔽 近来csdn开始主推博客皮肤升级,说白了就是有一套新的盈利模式,具体怎么操作呢: 1. 采用信息流方式,博客内容变成类似朋友圈.微博.知乎那样的信息 ...
- Mysql [Err] 1293 there can be only one TIMESTAMP column with CURRENT_TIMESTAMP in DEFAULT or ON UPDATE clause
问题: mysql数据 导入数据出错 [Err] 1293 - Incorrect table definition; there can be only one TIMESTAMP column w ...
- java多线程编程题之连续打印abc的几种解法
一道编程题如下: 实例化三个线程,一个线程打印a,一个打印b,一个打印c,三个线程同时执行,要求打印出6个连着的abc 题目分析: 通过题意我们可以得出,本题需要我们使用三个线程,三个线程分别会打印6 ...
- VisualStudio 合并代码文件
如果有相同的类,一般可以使用 partial 让他写在多个文件,那么如何把多个文件合并?请看 MainWindow.xaml 和 MainWindow.xaml.cs 其中 代码文件被折叠,那么如何做 ...
- ios 返回不会自动刷新页面问题
在实际开发过程中,移动端的兼容性问题有很大的坑,安卓可以了ios不行,ios可以了安卓又失效了这样,其中ios的回退操作就是不会自动刷新页面,很烦! 常见的history.back() history ...
- RabbitMQ-客户端
Install-Package RabbitMQ.Client 参考: http://www.rabbitmq.com/download.html https://www.nuget.org/pack ...
- Android模拟器调试html5 app
主机:Linux x641.Android模拟器,模拟器设置--->打开Enable Usb Debug2.在主机上安装firefox,最低v36.菜单--->开发者--->WebI ...