关于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%以上 ...
随机推荐
- CSS动画实例：太极图在旋转
利用CSS可以构造出图形,然后可以对构造的图形添加动画效果.下面我们通过旋转的太极图.放大的五角星.跳“双人舞”的弯月等实例来体会纯CSS实现动画的方法. 1．旋转的太极图 设页面中有<div ...
- 企业级Registry仓库Harbor的部署与简介
Harbor 是Vmware公司开源的企业级Docker Registry管理项目,开源项目地址:https://github.com/vmware/harbor Harbor的所有组件都在Docke ...
- 算法-搜索（4）ISAM算法
ISAM技术是一种典型的多叉搜索树结构,它使用了3级索引结构:主索引.柱面索引.磁道索引 所有数据记录在基本区按关键码升序排序,后一磁道所有关键码均大于前一磁道.在某一磁道插入新记录时,如果原来该磁道 ...
- call、apply、bind 的用法
例1 obj.objAge; //17 obj.myFun() //小张年龄undefined 例2 shows() //盲僧 比较一下这两者this 的差别,第一个打印里面的this 指向obj,第 ...
- 这么高颜值的Kubernetes管理工具Lens，难道还不能C位出道吗
1 前言 欢迎访问南瓜慢说 www.pkslow.com获取更多精彩文章! Docker & Kubernetes相关文章:容器技术 一直使用官方的Kubernetes Dashboard来管 ...
- Javascript基本数据认识
1.Js的组成 2.Js的三种引入 行内式 <input type="button" value="来嘛来嘛" onclick="alert(' ...
- Java自学-图形界面 Swing中的线程
Swing中的线程 步骤 1 : 三种线程 在Swing程序的开发中,需要建立3种线程的概念 初始化线程 初始化线程用于创建各种容器,组件并显示他们,一旦创建并显示,初始化线程的任务就结束了. 事件调 ...
- UnitTest框架的快速构建与运行
我们先来简单介绍一下unittest框架,先上代码: 1.建立结构的文件夹: 注意,上面的文件夹都是package,也就是说你在new新建文件夹的时候不要选directory,而是要选package: ...
- 【Pod Terminating原因追踪系列之三】让docker事件处理罢工的cancel状态码
本篇为Pod Terminating原因追踪系列的第三篇,前两篇分别介绍了两种可能导致Pod Terminating的原因.在处理现网问题时,Pod Terminating属于比较常见的问题,而本系列 ...
- vue中页面卡顿，使用懒加载
为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题. 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载. 常用的懒加载方式有两种:即使用vue异步组件 和 ES中的imp ...