写在前面

　　最近在群里突然看到一个问题，就是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四个单位的解释的更多相关文章

  1. px,pt,em,rem

    一直对px,pt,em,rem的认识有误区,现整理一下,供参考.之后还得整理下关于dpi相关的知识. px(pixe,像素l):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物 ...

  2. 必备：常用px,pt,em换算表(转)

    常用px,pt,em换算表 pt (point,磅):是一个物理长度单位,指的是72分之一英寸. px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理 ...

  3. 弄懂css中单位px和em,rem的区别

              国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢?         PX特点 1. IE无法调整那些使用px作为单位的字体大小 ...

  4. css中字体单位px,pt,em,百分比之间的区别和用法

    px 即像素,一般国内网站使用较多,默认大小是16px; pt 印刷行业常用单位 em  相对单位,相对父元素属性的单位 ,一般用于移动端布局 rem  结合相对定位和绝对定位的优势,相对根元素htm ...

  5. 彻底弄懂css中单位px和em,rem的区别

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 -1. IE无法调整那些使用px作为单位的字体大小: -2. 国外的大部分网站能够调 ...

  6. CSS中单位px和em,rem的区别

    PX特点: 1 IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...

  7. 彻底弄懂css中单位px和em,rem的区别 转的自己看

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...

  8. 【转载】彻底弄懂css中单位px和em,rem的区别

    原文链接:http://www.cnblogs.com/leejersey/p/3662612.html 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什 ...

  9. css中单位px和em,rem的区别[转载]

    PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...

随机推荐

  1. start-stop-daemon: matching on world-writable pidfile /var/run/redis/redis-server.pid is insecurefailed

    Microsoft Store上 看到最新的Ubuntu 20.04 LTS 已经适配到WSL上了, 于是卸载了老版本 18.04 LTS,安装上了最新版本的. 第一次启动会比较慢,需耐心等待 Ins ...

  2. JS 时间获取 (常用)

    /** * 获取几天之前日期 */ daysAgo(dayNum = 0) { let myDate = new Date() let lw = new Date(myDate - 1000 * 60 ...

  3. Oracle 多条数据转一行逗号隔开

    wm_concat   例: select wm_concat(市) from pa50 where apa132=省

  4. 蓝牙bluez命令

    记录一下自己平时调试蓝牙的命令,后续学习到再添加 sdptool命令: sdptool add SP    - 添加SPP: sdptool add --channel=1 DID SP DUN LA ...

  5. Qt 实现 异形 窗体&按钮

    //关键部分代码如下//设置异形窗体 //setWindowOpacity(0.5);//设置窗体透明度 0完全透明,1完全不透明 this->setWindowFlag(Qt::Framele ...

  6. DHCPV6 vs DHCPV4

    原文链接:https://blog.csdn.net/kdb_viewer/article/details/83310904 一.DHCPv4 vs DHCPv6 1. 相同点 使用DHCP clie ...

  7. anaconda3 安装pip3

    事先安装了anaconda3版本,此时想要安装pip3,需要: https://bootstrap.pypa.io/get-pip.py 打开链接,将文本存到本地,命名为get_pip.py. 然后通 ...

  8. redis数据库基础篇

    一.Redis介绍 Redis 是一个高性能的key-value数据格式的内存缓存,NoSQL数据库.NOSQL:not only sql,泛指非关系型数据库.关系型数据库: (mysql, orac ...

  9. 谁告诉的你们Python是强类型语言！站出来，保证不打你！

    1. 真的能用隐式类型转换作为强弱类型的判断标准吗?   最近有些学员问我,Python到底是强类型语言,还是弱类型语言.我就直接脱口而出:Python是弱类型语言.没想到有一些学员给我了一些文章,有 ...

  10. 《神经网络的梯度推导与代码验证》之FNN（DNN）前向和反向过程的代码验证

    在<神经网络的梯度推导与代码验证>之FNN(DNN)的前向传播和反向梯度推导中,我们学习了FNN(DNN)的前向传播和反向梯度求导,但知识仍停留在纸面.本篇章将基于深度学习框架tensor ...