PX:
PX实际上就是像素，用PX设置字体大小时，比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，
如果改变了浏览器的缩放，这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说，就是一个大问题了。
因此，这时就提出了使用“em”来定义Web页面的字体。

EM:
EM就是根据基准来缩放字体的大小。EM实质是一个相对值，而非具体的数值。这种技术需要一个参考点，一般都是以<body>的“font-size”
为基准。如WordPress官方主题Twenntytwelve的基准就是14px=1em。
另外，em是相对于父元素的属性而计算的

Rem:
EM是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。
而Rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值。

浏览器的兼容性
除了IE6-IE8r，其它的浏览器都支持em和rem属性，px是所有浏览器都支持。
因此为了浏览器的兼容性，可“px”和“rem”一起使用，用"px"来实现IE6-8下的效果，然后使用“Rem”来实现代浏览器的效果。

css中单位px和em，rem的区别的更多相关文章

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

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

  2. CSS中单位px和em,rem的区别

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

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

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

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

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

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

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

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

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

  7. [转]彻底弄懂css中单位px和em,rem的区别

    难怪会问我 rem 和 em, 这俩或在移动端还是很有必要学习的. root em OK? 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? P ...

  8. 网页布局设计css中单位px和em,rem的区别

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

  9. vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em，rem的区别

    移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...

  10. css中单位px，em，rem的区别

    1,px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. 2,em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认 ...

随机推荐

  1. java代码连接本地redis数据库

    关于redis的介绍在这里就不说了.今天主要讲解,如何连接redis.连接之前.必须要做的几点: 一.安装redis.下载服务和客户端,然后 二.启动redis服务. 经过这两步的测通以后.我们只需要 ...

  2. [LeetCode] Remove Duplicates from Sorted Array II [27]

    题目 Follow up for "Remove Duplicates": What if duplicates are allowed at most twice? For ex ...

  3. 自己定义Application的未捕获异常处理

    近期由于工作原因.进行Android应用开发时发现应用在出现类似空指针等异常时,抛出未被捕获的异常.Android系统有默认的未捕获异常处理器,默认行为是结束对应的线程,但并不会直接退出程序,并且在应 ...

  4. 解决不同浏览器创建不同 XMLHTTP 对象的问题

    function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XML ...

  5. USB-HID鼠标、键盘通讯格式(转) 与本人实际测试结果

    内容为网络转载,如有版权问题请联系删除 USB鼠标键盘协议介绍. 鼠标发送给PC的数据每次4个字节:BYTE1 BYTE2 BYTE3 BYTE4.定义分别是:BYTE1 -- |--bit7:    ...

  6. Jmeter查看QPS和响应时间随着时间的变化曲线

    以下两个插件提供测试结果,扩展图表显示 --- Response Times Over Time --- Transactions per Second 1.打开 https://jmeter-plu ...

  7. [Sdoi2013]直径（树的直径）

    //36分 #include<cstdio> #include<cstdlib> #include<cstring> #include<ctime> # ...

  8. Dire Wolf(区间DP)

    Dire Wolf Time Limit: 5000/5000 MS (Java/Others)    Memory Limit: 512000/512000 K (Java/Others)Total ...

  9. A visual proof that neural nets can compute any function

    http://neuralnetworksanddeeplearning.com/chap4.html In essence, we're using our single-layer neural ...

  10. php递归删除所有文件

    function del_file($dir) { if (@rmdir($dir)==false && is_dir($dir)) { if ($dp = opendir($dir) ...