PX特点

1. IE无法调整那些使用px作为单位的字体大小;

2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;

3. Firefox能够调整px和em,rem

px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

EM特点

1. em的值并不是固定的;

2. em会继承父级元素的字体大小。

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。

rem特点

rem是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

总结:

  • rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。
  • em 单位基于使用他们的元素的字体大小。
  • rem 单位基于 html 元素的字体大小。
  • em 单位可能受任何继承的父元素字体大小影响
  • rem 单位可以从浏览器字体设置中继承字体大小。
  • 使用 em 单位应根据组件的字体大小而不是根元素的字体大小。
  • 在不需要使用em单位,并且需要根据浏览器的字体大小设置缩放的情况下使用rem。
  • 使用rem单位,除非你确定你需要 em 单位,包括对字体大小。
  • 媒体查询中使用 rem 单位
  • 不要在多列布局中使用 em 或 rem ,改用%。
  • 不要使用 em 或 rem,如果缩放会不可避免地导致要打破布局元素。

摘自:http://www.cnblogs.com/leejersey/p/3662612.html#top

http://www.w3cplus.com/css/when-to-use-em-vs-rem.html

em&rem的更多相关文章

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

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

  2. css大小单位px em rem的转换和详解

    css大小单位px em rem的转换和详解 PX特点1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位:3. Firefox能 ...

  3. px,pt,em,rem

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

  4. 关于CSS中的字体尺寸设置 em rem等

    常用单位 在CSS中可以用很多不同的方式来设定字体的尺寸.一般来说,这些单位被分成两大类:绝对单位(absolute)和相对单位(relative). 绝对单位在大多数情况下是相对于某些实际量度而言的 ...

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

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

  6. px,em,rem的区别

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

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

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

  8. 关于响应式、媒体查询和media的关系 、流媒体布局flex 和em rem像素的使用 我有一些废话要讲.....

    一.什么是响应式 随着移动端越来遇火 网站的布局成为一个热议的话题 有的人喜欢用手机浏览网站.有的人喜欢用paid浏览网站.有人喜欢用电脑浏览网站 那么问题来了 我们怎么样才能使用一套css样式 完成 ...

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

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

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

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

随机推荐

  1. Linux 下安装和使用 Redis

    系统: CentOS-7-1611 首先安装gcc 因为要make编译 参照官网 wget  下载包 解压  make 编译完成后会在src目录下生成几个可执行文件 然后执行:make install ...

  2. 2019-3-1-WPF-从零开始开发-dotnet-Remoting-程序

    title author date CreateTime categories WPF 从零开始开发 dotnet Remoting 程序 lindexi 2019-03-01 09:30:45 +0 ...

  3. 洛谷P1508 Likecloud-吃、吃、吃 [2017年4月计划 动态规划10]

    P1508 Likecloud-吃.吃.吃 题目背景 问世间,青春期为何物? 答曰:“甲亢,甲亢,再甲亢:挨饿,挨饿,再挨饿!” 题目描述 正处在某一特定时期之中的李大水牛由于消化系统比较发达,最近一 ...

  4. 前端怎么传一个map给JAVA

    var map = {}; map['key1']=value1; map['key2']=value2; map['key3']=value3; map['key4']=value4; map['k ...

  5. 从0开始学习 GitHub 系列之「05.Git 进阶」

    关于 Git 相信大家看了之前一系列的文章已经初步会使用了, 但是关于Git还有很多知识与技巧是你不知道的,今天就来给大家介绍下一些 Git 进阶的知识. 1. 用户名和邮箱 我们知道我们进行的每一次 ...

  6. Vue.之.安装

    Vue.之.安装 第一步npm安装 首先:先从nodejs.org中下载nodejs   直到Finish完成安装. 打开控制命令行程序(CMD),检查是否正常 使用淘宝NPM 镜像 国内直接使用np ...

  7. 2019-5-13-WPF-从触摸消息转触摸事件

    title author date CreateTime categories WPF 从触摸消息转触摸事件 lindexi 2019-05-13 09:43:48 +0800 2019-05-12 ...

  8. [运维]ESXI Web Client 标签: vmware运维服务器 2017-05-28 20:59 597人阅读 评论(9)

    ESXI安装完成之后,配置好ip,我们就可以使用了?那么如何使用呢?一般来说有两种方式,一种是安装专门的管理客户端,client端,另一种更加方便,就是使用web client端. 下面来介绍一下es ...

  9. Codeforces 439C

    题目链接 比赛时间没能通过==, 只能说明自己代码写的太不严谨咯! 解题思想就是贪心 先判断无解的情况: 1. 奇数不够,因为偶数是无法凑成奇数的 2. 偶数不够,2个奇数可以凑成一个偶数 3. 在奇 ...

  10. MySQL安装后设置root 密码

    Mysql安装完成后初始化root 密码为空,直接回车 使用命令行: mysqladmin -u root password "123456" 来设置root密码.这里我设置的密码 ...