px(pixel)

像素，是屏幕上显示数据的最基本的点，表示相对大小(不同分辨率上px显示不同)

pt(point)

印刷行业常用的单位(磅)，等于1/72英寸，表示绝对长度

em

em是相对长度单位，基于父级元素的font-size计算字体大小。

如果未设置父级字体大小，则相对浏览器默认字体尺寸16px（1em = 16px）：10px=0.625em，

为了简化换算，在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 10px=1em

如果设置了父级元素的font-size：

<body style="font-size:14px">

    <p style="font-size:2em">我这里的字体显示大小是28px(14px*2)</p>  

    <div style="font-size:18px">

        <p style="font-size:2em">我这里显示字体大小是36px(18px*2),而不是上面计算的28px</p>

    </div>

</body>

rem （root em）

与em的区别在于，它是相对于html根元素的。(在body标签里面设置字体大小不起作用)

既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应

 <body style="font-size:14px">

     <p style="font-size:2rem">我这里的字体显示大小是32px(16px*2),因为我是根据html根元素的font-size大小进行计算的</p>  

     <div style="font-size:18px">

         <p style="font-size:2rem">我这里显示字体大小是32px(16px*2),因为我是根据html根元素的font-size大小进行计算的</p>

     </div>

 </body>

【参考：pt，px，rem和em之间区别总结】

px、pt、em、rem 的区别的更多相关文章

  1. px,pt,em,rem

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

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

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

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

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

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

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

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

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

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

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

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

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

  8. [转]彻底弄懂css中单位px和em,rem的区别

    难怪会问我 rem 和 em, 这俩或在移动端还是很有必要学习的. root em OK? 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? P ...

  9. 网页布局设计css中单位px和em,rem的区别

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

  10. px，em, rem的区别，在项目中怎么使用rem.

    一.px px像素,绝对单位.像素px是相对于显示器屏幕分辨率而言的,是一个虚拟的长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度单位,需要指定精度DPI. 二.em em是相对长 ...

随机推荐

  1. 【三十】php之PDO抽象层

    1.PDO介绍(php data object) PHP 数据对象 (PDO) 扩展为PHP访问数据库定义了一个轻量级的一致接口. PDO 提供了一个数据访问抽象层,这意味着,不管使用哪种数据库,都可 ...

  2. SSIS 延迟验证（DelayValidation）

    验证是一个事件,该事件在Package执行时,第一个被触发,验证能够避免SSIS引擎执行一个有异常的Package或Task.延迟验证(DelayValidation)是把验证操作延迟到Package ...

  3. 记录因webpack版本问题导致vue-cli快速搭建的项目运行时报错！

    今日突然在群里见到好几个小伙伴说在创建vue项目后不能跑,会报错. 刚开始还不信,花了几分钟时间自己试了下,还真报错了!如下图 小伙伴的报错,如下图!   百思不得其解,看了运行的日志也找不出原因.于 ...

  4. CodeForces832-B. Petya and Exam

    补的若干年以前的题目,水题,太菜啦_(:з」∠)_    B. Petya and Exam time limit per test 2 seconds memory limit per test 2 ...

  5. Bellman-Ford 求含负权最短路

    该算法详解请看   https://www.cnblogs.com/tanky_woo/archive/2011/01/17/1937728.html 单源最短路   当图中存在负权边时 迪杰斯特拉就 ...

  6. jvm内存模型-回收算法-和内存分配以及jdk、jre、jvm是什么关系(阿里，美团，京东面试题)

    1.什么是jvm?(1)jvm是一种用于计算设备的规范,它是一个虚构出来的机器,是通过在实际的计算机上仿真模拟各种功能实现的.(2)jvm包含一套字节码指令集,一组寄存器,一个栈,一个垃圾回收堆和一个 ...

  7. MFC中菜单的命令响应顺序

    响应只可以由Doc,View,MainFrame以及APP四个类完成. 响应顺序是: 点击某菜单项,框架类最先接到菜单命令消息. 框架类把接收到得这个消息交给它的子窗口,即视图类. 视图类根据命令消息 ...

  8. Web前端：改变鼠标样式

    <span style="cursor:auto">浏览器设置的光标</span><br /> <span style="cur ...

  9. Html5+js测试题(开发版)

    ------------------------------------------------ 1. 谈谈你对js闭包的理解: 使用闭包主要是为了设计私有的方法和变量.闭包的优点是可以避免全局变量的 ...

  10. CUDA共享内存的使用示例

    CUDA共享内存使用示例如下:参考教材<GPU高性能编程CUDA实战>.P54-P65 教材下载地址:http://download.csdn.net/download/yizhaoyan ...