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. 面试html部分

    1.DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动. DOM是文档对象模型的简称 DOM模型中两个节点可能存在的关系有两种:父子关系,兄弟关系. 添加节点:appendChi ...

  2. 002dayPython学习编码

    由于计算机是美国人发明的,所以计算机最开始只能识别256个字符(ASCII码),而你在计算机中输入中文就会报错 而中国人想让计算机认识中文,就重新编写了一套支持中文的编码(GB2312) 随后由于GB ...

  3. Qt笔记之Q_DECLARE_METATYPE(Type)

    首先看一看QVariant这个类,我们可以把它当做一个万能数据类型,需要的时候能转换为一种特定的类型. 使用canConvert()函数检查是否能转换为你想要的数据类型,结构为:bool QVaria ...

  4. java LRUCache

    package org.rx.cache; import org.rx.common.*; import org.rx.beans.DateTime; import java.util.Collect ...

  5. spyder常用功能

    最近和同学讨论到spyder的使用技巧,所以就结合之前在网上看到网友的总结( https://blog.csdn.net/peiwang245/article/details/78528098)和自己 ...

  6. SQL Server用表组织数据

    一.主键 主键作为表中的唯一标识,标识这一列不允许出现重复数据    如果两列或多列组合起来唯一标识表中的每一行,该主键叫“复合主键” 选择主键的原则     最少性      尽量选择单个键作为主键 ...

  7. 小程序wx.chooseImage的坑

    选择图片后可能重新执行onshow()和onhide(),可以在页面中添加锁变量,选择图片前获取,选择完释放,onshow中利用锁来中断执行

  8. web前端页面设计小笔记

    input总是在点击的时候出现蓝色边框,这是input的默认属性,就算设置了border:none:也没有用! #解决方法:outline:none; 设置input框里的placeholder值得字 ...

  9. Vim+Taglist+AutoComplPop之代码目录分栏信息和自动补全提示(Ubuntu环境)

    一步: 首先在Ubuntu环境中安装ctags:  sudo apt-get install ctags 第二部:       安装Taglist-------------Taglist是vim的一个 ...

  10. vue-router+elelment-ui,实现导航栏激活高亮

    <el-menu :default-active="$route.path" class="el-menu-vertical-demo" backgrou ...