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. js中的一些简单问题

    1.JavaScript的组成: ECMAScript标准--基本的语法和对象 DOM:Document Object Model 文档对象模型 BOM:Broswer Object Model 浏览 ...

  2. ShellExecute, WinExec与CreateProcess

    0x01  ShellExecute ShellExecute的功能是运行一个外部程序(或者是打开一个已注册的文件.打开一个目录.打印一个文件等等),并对外部程序有一定的控制.  函数原型: Shel ...

  3. Java中常见的分页算法

    在查询数据的时候或者展示数据的时候经常会使用分页,介绍几种简单的分页算法: //总的页数 int total = 30: //每页个数 int pageSize = 6; 1.one     int ...

  4. 获取百度地图POI数据二(准备搜索关键词)

    上篇讲到  想要获取尽可能多的POI数据 需要准备尽可能多的搜索关键字   那么这些关键字如何得来呢?   本人使用的方法是通过一些网站来获取这些关键词   http://poi.mapbar.com ...

  5. 自己动手写CPU——寄存器堆、数据存储器(基于FPGA与Verilog)

    上一篇写的是基本的设计方案,由于考研复习很忙,不知道下一次什么时候才能打开博客,今天就再写一篇.写一写CPU中涉及到RAM的部件,如寄存器堆.数据存储器等. 大家应该在大一刚接触到计算机的时候就知道R ...

  6. SpringCloud 教程

    参考http://blog.csdn.net/forezp/article/details/70148833 出自方志朋的博客

  7. RabbitMQ,为应对消息从发送到消费,各个环节消息丢失的解决方案

      1.发送方   为保证消息到达exchange,在这个过程中不丢失.  用事务或者发送方确认机制  见<RabbitMQ实战指南>4.8节 2.为保证消息不会因为到达exchange后 ...

  8. ES6 模板字符串Template String

    1. 模板字符串简介: 顾名思义,模板字符串是用来定义一个模板是使用的,就像Vue,React中的template语法. 首先,先来了解一下template string的基本用法: 在ES5中,我们 ...

  9. javascript 使用数组+循环+条件实现数字转换为汉字的简单方法。

    这几天,博主碰到了几道关于数字转汉字的javascript算法题,在网上找了很多的答案,发现都有点复杂,于是我决定自己写一篇关于这种算法题的简单解法,以下是博主自己的见解,有不足的地方请多指教. 接下 ...

  10. Vue2.x路由的步骤

    创建路由步骤: 1.引入vue-router库,可用最新版https://unpkg.com/vue-router 2.创建所需要的组件 3.创建router实例对象 4.在根实例中注册一下 => ...