PX:
PX实际上就是像素,用PX设置字体大小时,比较稳定和精确。但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,如果改变了浏览器的缩放,这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说,就是一个大问题了。
因此,这时就提出了使用“em”来定义Web页面的字体。 EM:
EM就是根据基准来缩放字体的大小。EM实质是一个相对值,而非具体的数值。这种技术需要一个参考点,一般都是以<body>的“font-size”为基准。如WordPress官方主题Twenntytwelve的基准就是14px=1em。
另外,em是相对于父元素的属性而计算的,如果想计算px和em之间的换算,这个网站不错,输入数据就可以px和em相互计算。狠击这里:px和em换算
EM特点 

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

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

所以我们在写CSS的时候,需要注意两点:

1. body选择器中声明Font-size=62.5%;

2. 将你的原来的px数值除以10,然后换上em作为单位;

3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

Rem:
EM是相对于其父元素来设置字体大小的,这样就会存在一个问题,进行任何元素设置,都有可能需要知道他父元素的大小。而Rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个参考值。 浏览器的兼容性
除了IE6-IE8r,其它的浏览器都支持em和rem属性,px是所有浏览器都支持。
因此为了浏览器的兼容性,可“px”和“rem”一起使用,用"px"来实现IE6-8下的效果,然后使用“Rem”来实现代浏览器的效果。 选择使用什么字体单位主要由你的项目来决定,如果你的用户群都使用最新版的浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者两者同时使用。

在这里为大家提供一个px,em,rem单位转换工具

地址:http://pxtoem.com/

参考:http://www.w3cplus.com/css3/define-font-size-with-css3-rem

px em rem 区别的更多相关文章

  1. px em rem区别

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

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

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

  3. px,em,rem的区别

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

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

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

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

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

  6. px,em,rem字体单位

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

  7. 彻底弄懂px em rem

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

  8. css里px em rem特点(转)

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

  9. px/em/pt区别和转换

    老是被人问到px.pt和em的区别,自己有时候也会纠结到底该用什么单位,今天特意查了一些文章,下面这篇虽然很久远了,但解释的比较全面,转载收藏之.点击查看原文 这里引用的是Jorux的“95%的中国网 ...

随机推荐

  1. Python3 tkinter基础 Entry state 不可写 可以选 可复制的输入框

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  2. AndroidO Treble架构分析【转】

    本文转载自:https://blog.csdn.net/yangwen123/article/details/79835965 从AndroidO开始,google引入了Treble架构,目的是为了方 ...

  3. How to Install LibreOffice 6.0 on Ubuntu 16.04 LTS +

    1. Add the LibreOffice 6.0 PPA The LibreOffice Fresh PPA is maintained by LibreOffice. It provides l ...

  4. Java日期时间(Date/Time)

    获取当前日期和时间 在Java中容易得到当前的日期和时间.可以使用一个简单的Date对象的toString()方法,如下所示打印当前日期和时间: import java.util.Date; publ ...

  5. 不能安装64位office提示已安装32位的

    安装64位office办公软件的时候提示已经安装32位的office办公软件所以无法继续安装,但实际上之前安装的32位的office办公软件已经卸载了.问题现象截图如下: 从问题描述中,我们其实已经能 ...

  6. C# this.Invoke和this.BeginInvoke 最简单的写法

    https://blog.csdn.net/gtosky4u/article/details/20118813 this.BeginInvoke(new EventHandler(delegate { ...

  7. 题解——CF Manthan, Codefest 18 (rated, Div. 1 + Div. 2) T1(找规律)

    就是找一下规律 但是奈何昨天晚上脑子抽 推错了一项QwQ 然后重新一想 A掉了QwQ #include <cstdio> #include <algorithm> #inclu ...

  8. 深度学习课程笔记(七):模仿学习(imitation learning)

    深度学习课程笔记(七):模仿学习(imitation learning) 2017.12.10 本文所涉及到的 模仿学习,则是从给定的展示中进行学习.机器在这个过程中,也和环境进行交互,但是,并没有显 ...

  9. 【Hadoop 分布式部署 四:配置Hadoop 2.x 中主节点(NN和RM)到从节点的SSH无密码登录】

    *******************                一定要使这三台机器的用户名相同,安装目录相同          ************* SSH 无密钥登录的简单介绍(之前再搭 ...

  10. Python 汉诺塔游戏

    #n 多少个盘子 def hanoi(n,x,y,z): : print(x,'→',z) else: hanoi(n-, x, z,y) #将前n-1个盘子从X移动到y上 print(x,'→',z ...