px和em,rem的区别
任意浏览器的默认字体高都是16px。
px: 像素(Pixel) , 计算机屏幕上的一个点。固定大小；不方便维护；
em：相对于当前对象内 (父元素) 文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸(16px)。相对大小；
rem:相对于HTML根元素。相对大小；
(所有未经调整的浏览器都符合: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,也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html{
font-size:12px;
}
#father{
font-size: 22px;
}
#em{
font-size: 1em;
}
#rem{
font-size: 1rem;
}
#px{
font-size: 32px;
}
</style>
</head>
<body>
<div id="father">
<div id="em">我是1em</div>
<div id="rem">我是1rem</div>
<div id="px">我是32px</div>
</div>
</body>
</html>
浏览器的兼容性: 除了IE6-IE8r，其它的浏览器都支持em和rem属性，px是所有浏览器都支持。
px和em,rem的区别的更多相关文章
- 彻底弄懂css中单位px和em,rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 -1. IE无法调整那些使用px作为单位的字体大小: -2. 国外的大部分网站能够调 ...
- CSS中单位px和em,rem的区别
PX特点: 1 IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...
- 彻底弄懂css中单位px和em,rem的区别 转的自己看
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...
- 弄懂css中单位px和em,rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小 ...
- 【转载】彻底弄懂css中单位px和em,rem的区别
原文链接:http://www.cnblogs.com/leejersey/p/3662612.html 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什 ...
- css中单位px和em,rem的区别[转载]
PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...
- [转]彻底弄懂css中单位px和em,rem的区别
难怪会问我 rem 和 em, 这俩或在移动端还是很有必要学习的. root em OK? 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? P ...
- 网页布局设计css中单位px和em,rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...
- px，em, rem的区别，在项目中怎么使用rem.
一.px px像素,绝对单位.像素px是相对于显示器屏幕分辨率而言的,是一个虚拟的长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度单位,需要指定精度DPI. 二.em em是相对长 ...
- css单位中px和em,rem的区别
css单位中分为相对长度单位.绝对长度单位. 今天我们主要讲解rem.em.px这些常用单位的区别和用法. px(绝对长度单位) 相信对于前端来说px这个单位是大家并不陌生,px这个单位,兼容性可以说 ...
随机推荐
- [DP之普通系列]
noip快要来了 要练练dp 难度也挺接近 还是挺好的 [Usaco2013 Nov]Pogo-Cow 这一道题要下一段大于这一段 所以的话我们就要记录每一段的状态 F[i,j]=F[j,k]+A[i ...
- 用yum源安装Nginx
1.在/etc/yum.repos.d/目录下创建一个源配置文件nginx.repo: cd /etc/yum.repos.d/ vi nginx.repo 填写如下内容: [nginx] name= ...
- Chapter 19_0 位操作库
位操作库是Lua5.2版本里添加的库,所有函数放在bit32 table里.(bit32只能针对32位整数运算) 在Lua5.3版本里,bit32库被废弃掉.不过可以使用一个外部兼容库,但是最好直接用 ...
- HDU 5130 Signal Interference(计算几何 + 模板)
HDU 5130 Signal Interference(计算几何 + 模板) 题目链接http://acm.hdu.edu.cn/showproblem.php?pid=5130 Descripti ...
- 寒假学干货之------LinearLayout.layout.weight
所有原始代码由这个大神写的--http://www.cnblogs.com/zhangs1986/archive/2013/01/17/2864237.html layout/activity_mai ...
- 比较C++中的4种类型转换方式（转自http://blog.csdn.net/hrbeuwhw/article/details/7884797）
C++的四种cast操作符的区别 Q:什么是C风格转换?什么是static_cast, dynamic_cast 以及 reinterpret_cast?区别是什么?为什么要注意? A:转换的含义是通 ...
- -webkit-overflow-scrolling
-webkit-overflow-scrolling 属性 控制元素在移动设备上是否使用滚动回弹效果. 取值 auto 使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止. touch 使 ...
- vcs 下使用system verilog调用c函数
c中要加入<svdpi.h> sv的tb中加入 import "DPI-C" function int funcname(); 仿真时,vcs命令行中加入 +vc fu ...
- JS 阻止整个网页的内容被选中
pretty-girl { -webkit-user-select: none; } 可是!可是!不是每个浏览器都可以不忧桑!!!那就只能请脚本大王出山了. 阻止选中 有时候,我们需要禁止用户选中一些 ...
- ensp实战之防火墙安全转发策略
本次实验用防火墙是USG6000V,拓扑图如下: 步骤一: 按上面配好PC1.2.3以及WWW服务器的IP地址.子网掩码以及网关: 步骤二: 进入防火墙的CLI命令模式下,按一下命令配置: 配置各个接 ...