关于px、pt、em、rem四个单位的解释
写在前面
最近在群里突然看到一个问题，就是px pt em rem 三者的区别，这个问题看起来非常基础，也非常容易被忽略，however，面试会问到~，那我就解释一下
px
px的英文是pixel，翻译过来就是像素，它是一个相对长度，因为素数是随着用户设备的分辨率而改变， 我们常称分辨率低、分辨率高都是相对于设备而言的。
em
是相对于浏览器的默认字体尺寸的字体单位，默认字体大小为16px，也就是说设定 font-size=1em 就得出了1em=16px
如果设定body的font-size=62.5% 则设定font-size=1.6em 就得出1.6em=16px
rem
rem是相对于html根元素的字体尺寸的字体单位，html页面的根元素为html，则设定了html元素的font-size，就设定了参考单位
比如设定html的单位为10px，则10rem就为100px
pt
pt是一个印刷单位 磅 ，是一个绝对单位，大小为1/72英寸，
总结
可见，px em rem 都是相对长度，只有pt是绝对长度
关于px、pt、em、rem四个单位的解释的更多相关文章
- px,pt,em,rem
一直对px,pt,em,rem的认识有误区,现整理一下,供参考.之后还得整理下关于dpi相关的知识. px(pixe,像素l):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物 ...
- 必备：常用px,pt,em换算表(转)
常用px,pt,em换算表 pt (point,磅):是一个物理长度单位,指的是72分之一英寸. px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理 ...
- 弄懂css中单位px和em,rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小 ...
- css中字体单位px,pt,em,百分比之间的区别和用法
px 即像素,一般国内网站使用较多,默认大小是16px; pt 印刷行业常用单位 em 相对单位,相对父元素属性的单位 ,一般用于移动端布局 rem 结合相对定位和绝对定位的优势,相对根元素htm ...
- 彻底弄懂css中单位px和em,rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 -1. IE无法调整那些使用px作为单位的字体大小: -2. 国外的大部分网站能够调 ...
- CSS中单位px和em,rem的区别
PX特点: 1 IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...
- 彻底弄懂css中单位px和em,rem的区别 转的自己看
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...
- 【转载】彻底弄懂css中单位px和em,rem的区别
原文链接:http://www.cnblogs.com/leejersey/p/3662612.html 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什 ...
- css中单位px和em,rem的区别[转载]
PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...
随机推荐
- IOS 如何持久化自定义对象 2014-08-01 01:38
如果持久话自定义对象 那么这个对象一定要遵循 NSCoding 协议 并实现编解码:然后再将编解码后的数据 NSKeyedArchiver 到NSData中 @interface NSKeyAnd ...
- 【笔记】springCloud--Alibaba--nacos介绍----启动报错解决方案
Nacos介绍 · 欢迎来到 Nacos 的世界! · Nacos 致力于帮助您发现.配置和管理微服务.Nacos 提供了一组简单易用的特性集,帮助您快速实现动态服务发现.服务配置.服务元数据及流量管 ...
- Java并发--final关键字
一.final使用场景 final可以稀释变量,方法和类,用于便是修饰的内容一旦赋值之后不会再被改变,比如string类就是一个final类型的类. 二.final修饰变量 在Java中变量可以分为成 ...
- 开发过程中遇到的-npm加载进node_modules里的文件怎么修改
来源:https://juejin.im/post/5ec381215188256d776342cd https://mp.weixin.qq.com/s?__biz=MzUzNjk5MTE1OQ== ...
- Scala集合操作中的几种高阶函数
Scala是函数式编程,这点在集合操作中大量体现.高阶函数,也就是能够接收另外一个函数作为参数的函数. 假如现在有一个需要是将List集合中的每个元素变为原来的两倍,现在来对比Java方式实现和Sca ...
- JAVA——JVM参数设置规则以及参数含义
JVM参数设置规则: -XX:+<option> 启用option,例如:-XX:+PrintGCDetails启动打印GC信息的选项,其中+号表示true,开启的意思-XX:-<o ...
- ssh连接：Socket error Event: 32 Error: 10053.
今天在使用xshell连接刚装的linux系统的时候,发现无法建立连接,会报如下错误: Connecting to 192.168.21x.x:22...Connection established. ...
- 更好用 更简单的Java缓存框架 jscache
比Spring Cache 更好用 更简单的缓存工具 jscache 取名意义为 java simple cache,基于AOP实现,支持注解到接口 自定义单个缓存过期时间配置 ttl,轻松扩展缓存实 ...
- Docker系列——Docker安装&基础命令
Docker 概述 Docker 是一个开源的应用容器引擎,Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化. ...
- CSS动画实例：行星和卫星
设页面中有<div class=" planet "></div>,用来绘制一个行星和卫星图形.这个图形包括三部分:行星.卫星和卫星旋转的轨道.定义. pl ...