1、px特点:

1、IE无法调整px作为单位的字体大小;
2、Firefox能够调整px、em和rem。
px是像素,是相对长度单位,是相对于显示器屏幕分辨率而言的。

2、em特点:

1、em的值并不是固定的;
2、em会继承父级元素的字体大小。
em也是相对长度单位,相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合:1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明font-size=62.5%,这就使em值变为16px*62.5%=10px,这样12px=1.2em,10px=1em,换算就会简单多了。
这里我们在写CSS的时候要注意:
1、body选择器中声明font-size=62.5%;
2、将原来的px数值除以10,然后换上em作为单位;
3、重新计算那些被放大的字体的em数值,避免字体大小的重复声明。也就是避免1.2*1.2=1.44的现象。比如说在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em,因为此em非彼em,它因继承#content的字体高而变为了1em=12px。

3、rem特点:

rem是CSS3新增的一个相对单位(root em,根em)。
与em的区别:使用rem为元素设定字体大小时,仍然是相对大小,但相对的是HTML根元素。这个单位集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是px和rem一起使用,用px来实现IE6-8下的效果,然后使用rem来实现现代浏览器的效果。

css里px em rem特点(转)的更多相关文章

  1. css中px,em,rem,rpx的区别

    今天看到一个面试题为 px,em的区别,为了更好地让读者区分css的长度单位,我总结下css中常用的长度单位: px,em,rem,rpx 像素px是我们在定义CSS中经常用到的尺寸大小单位,而em在 ...

  2. css单位px,em,rem区别

    在css中单位长度用的最多的是px.em.rem,这三个的区别是: px是固定的像素,一旦设置了就无法因为适应页面大小而改变. em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定 ...

  3. css中px em rem vw vh vmax vmin等单位的区别--转载

    px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. rem:相对 ...

  4. css 单位 px em rem

    http://www.cnblogs.com/leejersey/p/3662612.html

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

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

  6. px,em,rem的区别

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

  7. px em rem 区别

    PX:PX实际上就是像素,用PX设置字体大小时,比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,如果改变了浏览器的缩放,这时会使用我们的Web页面布局被打破.这样 ...

  8. px,em,rem字体单位

    1.px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS2.0手册) 2.em是相对长度单位.相对于当前对象内文本的字体尺寸,em存在值继承问题. 浏览器的默认字 ...

  9. 彻底弄懂px em rem

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

随机推荐

  1. 将字符串类型的出生日期转为int类型的年龄

    public static int getAgeByBirthday(String s) { Date birthday = null; SimpleDateFormat format = new S ...

  2. P3954 成绩(noip2017普及组)

    题目描述 牛牛最近学习了C++入门课程,这门课程的总成绩计算方法是: 总成绩=作业成绩\times 20\%+×20%+小测成绩×30\%+×30%+期末考试成绩\times 50\%×50% 牛牛想 ...

  3. API响应

    保证API响应的正确性,就是你需要做的大部分工作.postman的response viewer部分会协助你完成该工作且使其变得简单. 一个API的响应包含body,headers,响应状态码.pos ...

  4. Python机器学习(基础篇---监督学习(集成模型))

    集成模型 集成分类模型是综合考量多个分类器的预测结果,从而做出决策. 综合考量的方式大体分为两种: 1.利用相同的训练数据同时搭建多个独立的分类模型,然后通过投票的方式,以少数服从多数的原则作出最终的 ...

  5. Introduction to Unity UI

    https://www.raywenderlich.com/795-introduction-to-unity-ui-part-1 https://www.raywenderlich.com/794- ...

  6. oracle 建表默认空间

    oralce 建表后会有默认表空间,如果没有指定表空间会把所有信息放到users表空间内.要改默认空间 ,首先当前用户要有权限,然后按照 alter database 表名 tablespace 表空 ...

  7. python爬虫基础_requests和bs4

    这些都是笔记,还缺少详细整理,后续会更新. 下面这种方式,属于入门阶段,手动成分比较多. 首先安装必要组件: pip3 install requests pip3 install beautifuls ...

  8. pandas 常用函数

  9. 北大poj- 1009

    Edge Detection Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 22835   Accepted: 5398 D ...

  10. Python成长之路【第四篇】模块儿

    模块儿&包(* * * * *) 模块儿(modue)的概念 在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护. 为了编写可维护的代码,我们把很多 ...