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. Nginx的虚拟服务器域名配置

    虚拟服务器名(server name)是通过指令server_name来指定的.在< Nginx是如何处理Request的?>一节中,我们讲到nginx分两步来匹配过来的Request请求 ...

  2. asp.net core 多端口监听&日志服务

    1 配置多个端口监听 HostingAbstractionsWebHostBuilderExtensions. public static IWebHostBuilder UseUrls(this I ...

  3. 持续更新：从零开始的php学习生活

    其实也不是真的从零开始,在此之前我还是一边研究博学(博客美化)一边学的CSS.HTML.JavaScript的,相关内容可以戳这里. 看本文之前你最好稍微熟悉一下HTML.JavaScript什么的. ...

  4. bzoj:1666: [Usaco2006 Oct]Another Cow Number Game 奶牛的数字游戏

    Description 奶牛们又在玩一种无聊的数字游戏.输得很郁闷的贝茜想请你写个程序来帮她在开局时预测结果.在游戏的开始,每头牛都会得到一个数N(1<=N<=1,000,000).此时奶 ...

  5. Codeforces 810C Do you want a date?(数学，前缀和)

    C. Do you want a date? time limit per test:2 seconds memory limit per test:256 megabytes input:stand ...

  6. hbmy周赛1--C

    C - Exam Time Limit:1000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u Submit St ...

  7. git学习四：eclipse使用git提交项目

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

  8. qt中moc的作用

    Qt 将源代码交给标准 C++ 编译器,如 gcc 之前,需要事先将这些扩展的语法去除掉.完成这一操作的就是 moc. moc 全称是 Meta-Object Compiler,也就是"元对 ...

  9. ASP.NET CORE MVC 2.0 项目中引用第三方DLL报错的解决办法 - InvalidOperationException: Cannot find compilation library location for package

    目前在学习ASP.NET CORE MVC中,今天看到微软在ASP.NET CORE MVC 2.0中又恢复了允许开发人员引用第三方DLL程序集的功能,感到甚是高兴!于是我急忙写了个Demo想试试,我 ...

  10. Button重写onClick两种方式

    实现接口和匿名内部类 下午没课,自己又继续安卓的学习,照着书上做了一个left碎片Button点击后动态加载right碎片布局的Test,准备自己再继续做一个单击左碎片的button1 加载右碎片布局 ...