写在前面

　　最近在群里突然看到一个问题，就是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. STL函数库的应用第一弹——数据结构（队列）

    队列是什么? 队列是一种特殊的线性表,特殊之处在于它只允许在表的前端进行删除操作,而在表的后端进行插入操作. 和栈一样,队列是一种操作受限制的线性表.进行插入操作的端称为队尾,进行删除操作的端称为队头 ...

  2. DVWA-1.9之fileupload

    low级 对文件类型没有任何约束,可直接上传"一句话木马"hack.php,连接冰蝎. 一句话木马 : medium级 源代码 if( ( $uploaded_type == &q ...

  3. 机器学习：支持向量机(SVM)

    SVM,称为支持向量机,曾经一度是应用最广泛的模型,它有很好的数学基础和理论基础,但是它的数学基础却比以前讲过的那些学习模型复杂很多,我一直认为它是最难推导,比神经网络的BP算法还要难懂,要想完全懂这 ...

  4. 目录扫描、Nmap

    一.基本定义 1.目录扫描: 扫描站点的目录,寻找敏感文件(目录名.探针文件.后台.robots.txt.备份文件等). 2.目录:站点结构,权限控制不严格. 3.探针文件:服务器配置信息,例:php ...

  5. Hadoop的源码编译

    目录 正文 1.准备阶段 使用root登录Centos,并且要求能够正常连接网络.配置清单如下: (1)hadoop-2.7.2-src.tar.gz (2)jdk-8u144-linux-x64.t ...

  6. JAVA设计模式简介及六种常见设计模式详解

    一.什么是设计模式                                                                                           ...

  7. Istio 网络弹性 实践 之 故障注入 和 调用超时

    网络弹性介绍 网络弹性也称为运维弹性,是指网络在遇到灾难事件时快速恢复和继续运行的能力.灾难事件的范畴很广泛,比如长时间停电.网络设备故障.恶意入侵等. 超时时间 工作中常常会碰到这样的开发.测试场景 ...

  8. CSS动画实例：行星和卫星

    设页面中有<div class=" planet "></div>,用来绘制一个行星和卫星图形.这个图形包括三部分:行星.卫星和卫星旋转的轨道.定义. pl ...

  9. 算法-搜索（4）ISAM算法

    ISAM技术是一种典型的多叉搜索树结构,它使用了3级索引结构:主索引.柱面索引.磁道索引 所有数据记录在基本区按关键码升序排序,后一磁道所有关键码均大于前一磁道.在某一磁道插入新记录时,如果原来该磁道 ...

  10. Open MPI 4.0 编译安装

    电脑上目前使用的mpi环境是2.1.1版本的openmpi,是我之前直接使用系统的包管理工具安装的.但是系统包版本一般都比较老旧,现在openmpi最新版已经出到了4.0,即将出4.1了,所以我打算升 ...