/px/em/rem/的区别
PX特点:
1 .IE无法调整那些使用px作为单位的字体大小;
2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;
3.Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
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, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。
*****************************************************************************************************************
em特点:
em的值并不是固定的;
em会继承父级元素的字体大小。所以我们在写CSS的时候,需要注意两点:
body选择器中声明Font-size=62.5%;
将你的原来的px数值除以10,然后换上em作为单位;
重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。
***************************************************************************************************************
rem特点:
rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根
元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版
本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子:p {font-size:14px; font-size:.875rem;}
选择使用什么字体单位主要由你的项目来决定,如果你的用户群都使用最新版的浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者两者同时使用。
/px/em/rem/的区别的更多相关文章
- px,em,rem的区别
PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...
- 搞清css的单位 px,em,rem的区别
前言:现在上大街一眼望去,基本上90%的人都拿着手机,走路,逛街,吃东西都不停着,所以对于我们这种前端开发的程序猿来说,让网页适应于移动端可以说是必须要满足的.所以最近也是一直在学习和实践.然后就接触 ...
- px,em,rem的区别与用法
别人总结的.个人觉得特别的好: http://www.w3cplus.com/css/when-to-use-em-vs-rem.html
- 彻底弄懂css中单位px和em,rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 -1. IE无法调整那些使用px作为单位的字体大小: -2. 国外的大部分网站能够调 ...
- 彻底弄懂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 ...
随机推荐
- android之fragment
觉得写得好:http://blog.csdn.net/shulianghan/article/details/38064191
- 软件测试第四周--关于int.parse()的类型转换问题
先来归纳一下我们用过的所有类型转换方法: 1. 隐式类型转换,即使用(int) 直接进行强制类型转换.这种方法的优点是简单粗暴,直接指定转换类型,没有任何保护措施,所以也很容易抛出异常导致程序崩溃.当 ...
- ios之JavaScript
初次接触java脚本,感觉java脚本so interesting!为什么呢?写javascript代码感觉就像是在记流水账,无拐弯抹角,一个字,就是"干",想怎么干就怎么干,哈哈 ...
- JS第二天简单总结
布尔型变量:true,flase 广泛用于真假的逻辑判断 对象:分类,对象是由一些彼此相关的属性和方法集合在一起而构成的一个数据实体: 例如,var today = new Date();中,Date ...
- 【其他】win7创建wifi热点共享给手机使用
出门在外,有时候网络有诸多不便,需要用笔记本创建wifi热点给手机用:本人测试xp怎么配置都不好使,但win7有可行的方案,不依赖第三方软件. 详述如下: 场景一:win7 + A(PC机)(用无线连 ...
- [解决方案] pythonchallenge level 4
http://www.pythonchallenge.com/pc/def/linkedlist.php 查看页面源代码或者点击图片 http://www.pythonchallenge.com/pc ...
- KBEngine 学习笔记
最近开始学习 KBE 扩展技能点>_<!所以建一个随笔记录一下遇到的小问题: 问题1 :DBMgr找不到LibMysql32.dll 解决:VS 中KBE源码 默认的是Win32 ,Win ...
- a* products
Experience of black-box testing on set-top-boxes/IP-connected devices, games consoles and tablets ht ...
- BZOJ 4204 && BZOJ 2510 循环矩阵
n^3logn非常显然.所以要用一种因为这个矩阵是一个循环矩阵,所以只要知道第一行就可以知道所有行了. C[i][j]=C[i-1][j-1]; #include <iostream> # ...
- LayaAir引擎——(五)
LayaAir引擎——关于地图详解 所需要的软件: LayaAirIDE1.0.2版本 在LayaAir引擎中与地图相关的类: 1.laya.map.TiledMap TiledMap类 地图以层 ...