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. Spring Boot修改启动端口

    spring boot是个好东西,可以不用容器直接在main方法中启动,而且无需配置文件,方便快速搭建环境.可是当我们要同时启动2个springboot工程时,就会有问题,有可能会因为8080端口被第 ...

  2. C++拷贝构造函数（深拷贝与浅拷贝）

    转自http://blog.csdn.net/lwbeyond/article/details/6202256/ 一. 什么是拷贝构造函数 对于普通类型的对象来说,它们之间的复制是很简单的,例如:in ...

  3. 使用 GStreamer appsrc 等插件实现视频音频混流，录制和推流

    目前在做的在线直播教室,需要将老师分享的屏幕和老师的声音.学生的声音录制为一个视频文件,以便学生上课后还可以再看回放. 直播服务我们采用的是腾讯的视频服务,有现成的 SDK 可以用.但 SDK 自带的 ...

  4. Centos7 Zookeeper

    本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 ZK是一个高效的分布式协调服务,高可用的分布式管理协调框架. 朋友推荐一本书& ...

  5. metasploit魔鬼训练营（收集外围信息）

    现在我们时空穿越,来到魔鬼训练营的主角身上,现在我们要训练,对V公司进行渗透测试,回想起总监说的情报收集 1,外围搜集,指的是自己假装是一个正常用户来搜集情报 我们开启msf用auxiliary/sc ...

  6. UVA 11636-Hello World!(水题，猜结论)

    UVA11636-Hello World! Time limit: 1.000 seconds When you first made the computer to print the sentenc ...

  7. Vijos P1131 最小公倍数和最大公约数问题【暴力】

    最小公倍数和最大公约数问题 描述 输入二个正整数x0,y0(2≤x0≤100000,2≤y0≤1000000),求出满足下列条件的P.Q的个数. 条件:1.P.Q是正整数 2.要求P.Q以xO为最大公 ...

  8. 2017 ICPC/ACM 沈阳区域赛HDU6223

    Infinite Fraction Path Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java ...

  9. NYoj_20吝啬的国度

    吝啬的国度 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描述 在一个吝啬的国度里有N个城市,这N个城市间只有N-1条路把这个N个城市连接起来.现在,Tom在第S号城市,他有 ...

  10. jquery 和 mui 上拉加载

    jquery: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <m ...