CSS中em、rem和px的区别
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px，1rem=16px。
EM特点
1. em的值并不是固定的；
2. em会继承父级元素的字体大小。
rem特点
rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。为了方便理解，我们就理解rem为root em，顾名思义rem只相对跟节点<html>计算，这就是说只要在根节点设定好参考值，那么全篇的1rem都相等，计算方式同em，默认1rem=16px; 同理你可以设定html { font-size:62.5% } 那么1rem就等于10px，以此类推。。。
声明一下：rem是css3属性，没错！这就是说屌丝ie678不支持rem属性，只有chrome、firefox等高富帅支持！那么我们就在ie678中用px做兼容处理，例如：
.box {
font-size: 14px; /* 用来兼容ie678 */
font-size: 0.875em;
}
PX特点
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)
如果全篇用px布局会暗藏一个蛋疼的问题，就是当用户和Ctrl滚页面的时候（说白了就是ctrl+，ctrl-），你会发现页面结构产生了不可预知的错乱。
CSS中em、rem和px的区别的更多相关文章
- CSS中em,rem的区别
首先这两个单位一般用在移动端 不太清楚得求证 再记录 1.em w3cschool中给出css中尺寸单位如下: 单位 描述 % 百分比 in 英寸 cm 厘米 mm 毫米 em 1em 等于当前的字 ...
- CSS中em，px区别（转）
这里向大家描述一下CSS中px和em的特点和区别,px像素(Pixel),相对长度单位,像素px是相对于显示器屏幕分辨率而言的,而em是相对长度单位,相对于当前对象内文本的字体尺寸,相信本文介绍一定会 ...
- css中em小于1时chrome字体大小和firefox字体大小不一致的问题
css中em设置为0.8,结果页面显示,chrome字体比firefox字体大了不少. chrome有默认字体大小,默认为12px.设置的字体大小小于12px时,也是按照12px来显示. firefo ...
- css中zoom和transform:scale的区别
css中zoom和transform:scale的区别 关于zoom: 以前只是看到别人的代码中用过zoom,自己从未使用过,今天在探究ie7兼容inline-block时,发现里面提到了zoom.下 ...
- CSS中的 REM PX EM
px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的 em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸. ...
- CSS 中的rem，em，vh，vw一次说清楚
关于css中的长度单位,我们用的最多就是px,因为他简单直接.但是当一套方案匹配不同终端时,px就会显得过于生硬,不容易变通. 然而rem,em,vh,vw就可以有效的解决这一问题.让我们来看看这些东 ...
- 谈谈CSS中em与px的差异
在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理想,ChinaUI等都是使用了px作为字体单位.只有百度好歹做了个可调的表率.而 在大洋彼岸,几乎所有的主流站点都使用em作为字体单位, ...
- em(倍)与px的区别
在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理想,ChinaUI等都是使用了px作为字体单位.只有百度好歹做了个可调的表率.而 在大洋彼岸,几乎所有的主流站点都使用em作为字体单位, ...
- css中字体常用单位px、em、rem和%的区别及用法总结
一.px.em.rem和%的定义 1.px(像素) px单位的名称为像素,它是一个固定大小的单元,像素的计算是针对(电脑/手机)屏幕的,一个像素(1px)就是(电脑/手机)屏幕上的一个点,即屏幕分辨率 ...
随机推荐
- Farthest Nodes in a Tree ---LightOj1094（树的直径）
题目链接:http://lightoj.com/volume_showproblem.php?problem=1094 Given a tree (a connected graph with no ...
- 洛谷P4799 世界冰球锦标赛 CEOI2015 Day2 meet-in-the-middle
正解:折半搜索 解题报告: 先放个传送门QAQ 想先说下部分分?因为包含了搜索背包两个方面就觉得顺便复习下?QwQ 第一档部分分 爆搜 就最最普通的爆搜鸭,dfs(第几场,钱),然后每次可以看可以不看 ...
- Spring boot maven 搭建框架
Spring Boot:目的:这个框架帮助开发者更容易地创建基于Spring的应用程序和服务,使得pring开发者能够最快速地获得所需要的Spring功能.优点:完全不需要XML配置,让spring应 ...
- 使用celery之怎么让celery跑起来（转）
原文:http://www.dongwm.com/archives/how-to-use-celery/ 前言 自从发了上次的文章使用celery之深入celery配置, 有一些网友再问我怎么让cel ...
- Navicat运行sql文件报错out of memory
下载并安装mysql workbench:
- OCR技术浅探：Python示例(5)
文件说明: 1. image.py——图像处理函数,主要是特征提取: 2. model_training.py——训练CNN单字识别模型(需要较高性能的服务器,最好有GPU加速,否则真是慢得要死): ...
- C++循环的内存释放问题？
针对http://wenku.baidu.com/view/56d732ee856a561252d36ff2.html的内容测试一下. #include "A.h" #includ ...
- PhotoSwipe中文API(五)
Responsive Images PhotoSwipe不支持<图片>或srcset,因为它要求所定义的图像的尺寸,并使用延迟加载.但是,随着图像动态加载,它很容易切换人士透露,即便是在旧 ...
- try...cath...finally中的return什么时候执行
一finally可以没有,也可以只有一个.无论有没有发生异常,它总会在这个异常处理结构的最后运行.即使你在try块内用return返回了,在返回前,finally总是要执行,这以便让你有机会能够在异常 ...
- placement new--《C++必知必会》 条款35
placement new是重载operator new的一个标准.全局的版本,它不能被自定义的版本代替(不像普通的operator new和operator delete能够被替换成用户自定义的版本 ...