写在前面

　　最近在群里突然看到一个问题，就是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. eric4 中pyqt 字符串 输入 获取

    在eric4中使用pyqt需要注意: 输入 中文 时,前面加 u ,例如: from PyQt4.QtGui import * from PyQt4.QtCore import * QMessageB ...

  2. java+opencv实现图像灰度化

    灰度图像上每个像素的颜色值又称为灰度,指黑白图像中点的颜色深度,范围一般从0到255,白色为255,黑色为0.所谓灰度值是指色彩的浓淡程度,灰度直方图是指一幅数字图像中,对应每一个灰度值统计出具有该灰 ...

  3. git 常规操作 windows版

    首先在本地建立好文件夹,然后初始化git仓库: git init 接下来在github上面克隆项目: git clone 这里写你的项目地址 然后就可以修改,删除,提交代码了  如果需要在新分支上面开 ...

  4. linux 强制重启！

    原文链接:https://www.cnblogs.com/wipy/p/4261472.html 有时候,linux 由于硬盘或者其它原因, 某个进程挂住了,怎么也杀不死, 输入 reboot 命令也 ...

  5. redis安装及性能测试

    Redis是一个开源的使用ANSI C语言编写.遵守BSD协议.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库.通常被称为数据结构服务器,因为值(value)可以是 字符串(Stri ...

  6. Exploring Adversarial Attack in Spiking Neural Networks with Spike-Compatible Gradient

    郑重声明:原文参见标题,如有侵权,请联系作者,将会撤销发布! arXiv:2001.01587v1 [cs.NE] 1 Jan 2020 Abstract 脉冲神经网络(SNN)被广泛应用于神经形态设 ...

  7. Intriguing properties of neural networks

    郑重声明:原文参见标题,如有侵权,请联系作者,将会撤销发布! https://arxiv.org/abs/1312.6199v4 Abstract 深度神经网络是近年来在语音和视觉识别任务中取得最新性 ...

  8. DVWA之文件上传（一）

    实验环境为三台虚拟机,网络互通,分别是: 1.kali,IP为192.168.230.131 2.win10,IP为192.168.230.142 3.server 2019,IP为192.168.2 ...

  9. CF1270B Interesting Subarray 题解

    22:20下晚自习所以只打了10+min,然而这并不能成为我脑抽没一眼看出B题的借口,所以又掉回绿名了qwq.所以我还是太菜了. 题意分析 给出一个数列,要求找出一段连续的子数列满足这个子数列的最大值 ...

  10. 滑动窗口（Sliding Window）技巧总结

    什么是滑动窗口(Sliding Window) The Sliding Problem contains a sliding window which is a sub – list that run ...