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. 自定义注解,andjdk提供的元注解

    @Target(ElementType.METHOD) @Retention(RetentionPolicy.RUNTIME) @Documented public @interface FruitN ...

  2. StackExchange.Redis学习笔记(五) 发布和订阅

    Redis命令中的Pub/Sub Redis在 2.0之后的版本中 实现了 事件推送的  发布订阅命令 以下是Redis关于发布和订阅提供的相关命令 SUBSCRIBE channel [channe ...

  3. 关于JS中变量提升的规则和原理的一点理解(二)

    上篇文章中讲到变量提升和函数提升的先后顺序时蒙了,后来去查了一下资料,特别整理一下. 在<你不知道的JavaScript(上卷)>一书的第40页中写到:函数会首先被提升,然后才是变量. 书 ...

  4. [bzoj1811] [Ioi2005]mea

    还是比较好想到的..设第一个数为x,那么以后的所有数都能用x和M表示出来. 然后再根据非递减的限制条件得出x的取值范围. #include<cstdio> #include<iost ...

  5. c语言基础学习02_windows系统下的cmd命令

    =============================================================================注意:cmd的命令很多,需要用的时候可以查询即 ...

  6. c++(排序二叉树插入)

    二叉树的节点插入比较简单.一般来说,二叉树的插入主要分为以下两个步骤: 1) 对当前的参数进行判断,因为需要考虑到头结点,所以我们使用了指针的指针作为函数的输入参数 2) 分情况讨论: 如果原来二叉树 ...

  7. flume1.8 Sinks类型介绍(三)

    1. Flume Sinks 1.1 HDFS Sink 该sink把events写进Hadoop分布式文件系统(HDFS).它目前支持创建文本和序列文件.它支持在两种文件类型压缩.文件可以基于数据的 ...

  8. 独立成分分析(ICA)的模拟实验(R语言)

    本笔记是ESL14.7节图14.42的模拟过程.第一部分将以ProDenICA法为例试图介绍ICA的整个计算过程:第二部分将比较ProDenICA.FastICA以及KernelICA这种方法,试图重 ...

  9. git学习四:eclipse使用git提交项目

    支持原创:http://blog.csdn.net/u014079773/article/details/51595127 准备工作: 目的:eclipse使用git提交本地项目,提交至远程githu ...

  10. post请求测试

    也可以用下图来指定测试参数