写在前面

　　最近在群里突然看到一个问题，就是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. 记录使用Python登录浙江大学统一身份认证

    背景 现在每天要进行健康情况上报,但是因为经常睡过头忘记打卡,于是想着写一个程序来自动打卡. 统一身份认证 访问健康情况上报页面(https://healthreport.zju.edu.cn/nco ...

  2. 【译】New experimental Razor editor for Visual Studio

    随着 Visual Studio 2019 16.7 Preview 4 的发布,现在可以尝试我们新的实验性 Razor 编辑器,用于本地开发,包括 MVC.Razor Page 和 Blazor.我 ...

  3. 关于Spark RDD 的认识

    一.基本认识 RDD 是Spark大数据计算引擎中,抽象的一种数据结构. RDD(Resilient Distributed Dataset),中文意思是弹性分布式数据集,它是Spark中的基本抽象. ...

  4. Nordic 52840-Timer定时器学习问题（一）

    今天在ble_app_blinky例程中移植定时器驱动,在编译过程中报出了两个错误,在此记录一下. 1. 在nRF_Dreivers中添加nrfx_timer.c文件 选中“nRF_Dreivers  ...

  5. ImportError: No module named git

    问题:ImportError: No module named git 解决:yum install GitPython

  6. neutron-server Connection pool is full, discarding connection 连接池过满

    参考链接:https://zhiliao.h3c.com/Theme/details/48291 问题: -- ::33.235 WARNING requests.packages.urllib3.c ...

  7. golang rpc demo

    RPC工作流程图 1.调用客户端句柄:执行传送参数 2.调用本地系统内核发送网络消息 3.消息传送到远程主机 4.服务器句柄得到消息并取得参数 5.执行远程过程 6.执行的过程将结果返回服务器句柄 7 ...

  8. 结对作业：四则运算（Java+JavaFX）

    一.简介 此程序是一个可自动生成,计算小学四则运算题目的项目. Github地址:https://github.com/czmDeRepository/SoftwareWork/tree/master ...

  9. 前端框架之vue初步学习

    Vue.js介绍: Vue.js是一个构建数据驱动的web界面的渐进式框架.Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件.它不仅易于上手,还便于与第三方库或既有项目整合 ...

  10. vue + vant 上传图片之压缩图片

    <van-uploader v-model="fileList" multiple :after-read="afterRead" :max-count= ...