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. [笔记]Linux命令行大全

    date 显示当前时间和日期 cal 显示当前月份的日历 df 查看磁盘剩余空间的数量 free 显示空闲内存的数量 pwd 打印当前工作目录 cd 切换目录 ls 列出文件夹内容 绝对路径:开始于根 ...

  2. JavaScript语法详解：JS简介&变量

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. JavaScript简介 Web前端有三层: HTML:从语义的角度,描 ...

  3. python的while循环

    age_of_laochuanzhang = 56 conut = 0 while True: if conut == 3: print("输入次数上限") break age = ...

  4. JMeter基本元素简介

    JMeter基本元素简介 一.测试计划 测试计划对象有一个复选框叫做"Functional Testing"(函数测试模式),如果选中,它将使jmeter记录服务端返回的每一个样例 ...

  5. nautilus出现一闪而过现象

    linux相关问题: 1．这几天在使用乌班图时,出现文件夹打开一闪而过现象,于是我试着使用命令行来启动: sudo nautilus 出现下面这一堆错误(error_info): (nautilus: ...

  6. Django之cookie验证

    先不用太多的蚊子描述什么是cookie,先做一个小实验: 此时我们在谷歌浏览器(一个客户端)和IE浏览器(另一个用户)测试: 刺客我们发现在两台浏览器都可以访问,而且不用进入login验证就可以登录, ...

  7. C语言实现整数和16进制互相转换

    编译环境:Dev-C++ 5.2.0.3 使用sprintf()函数实现转换,代码如下: #include <stdio.h> #include <stdlib.h> int ...

  8. Redis 数据结构与内存管理策略（上）

    Redis 数据结构与内存管理策略(上) 标签: Redis Redis数据结构 Redis内存管理策略 Redis数据类型 Redis类型映射 Redis 数据类型特点与使用场景 String.Li ...

  9. c语言基础学习03

    =============================================================================涉及到的知识点有:编码风格.c语言的数据类型. ...

  10. Docker+Jenkins持续集成环境（3）集成PMD、FindBugs、Checkstyle静态代码检查工具并邮件发送检查结果

    为了规范代码,我们一般会集成静态代码检测工具,比如PMD.FindBugs.Checkstyle,那么Jenkins如何集成这些检查工具,并把检查结果放到构建邮件里呢? 今天做了调研和实现,过程如下 ...