小米技术社区
小米技术社区管理员 关于小米

27岁,山西运城人,职业电商经理人,前端开发工作者,从事过网站建设、网络推广、SEO、SEM、信息流推广、二类电商、网络运维、软件开发,等相关电商工作,经验较为丰富,小米技术社区致力于为广大从事Web前端开发的人员提供一些力所能及的引导和帮助 ...[更多]

E-mail:mzze@163.com

Q Q:32362389

W X:xiaomi168527

小米介绍

小米技术社区大牛王飞 关于王飞

27岁,山西运城人,职业电商经理人,网络工程师兼运维,从事过运营商网络建设,企业网络建设、优化。数据中心网络维护等通过,经验丰富,座右铭:当自己休息的时候,别忘了别人还在奔跑。 ...[更多]

E-mail:wf_live@126.com

Q Q:3940019

微博:王小贱ss

小米技术社区设计小艳 关于小艳

大于花一样的年龄,河南郑州是我家,2010年在北京接触团购网,2011年进入天猫淘宝一待就是四年,如今已经将设计走向国际化(ps:误打误撞开始进入阿里巴巴国际站的设计,嘿嘿)五年电商设计,丰富经验,从事过天猫淘宝阿里各项设计,店铺运营,产品拍摄;我将我的经历与您分享是我的快乐!座右铭:越努力越幸运! ...[更多]

E-mail:97157726@qq.com

Q Q:97157726

标签云
精品推荐
您的位置:首页 > 前端开发 > 响应式网站

响应式网站和移动端为什么建议用rem,而不是em和px

分类: 响应式网站10个赞

很多人对px和em以及rem分的不是很清楚

px我们都知道,像素

em 和 rem 单位之间的区别是浏览器根据谁来转化成px值 理解这种差异是决定何时使用哪个单元的关键。 

当使用 rem 单位,他们转化为像素大小取决于页根元素的字体大小,即 html 元素的字体大小。 rem 单位翻译为像素值是由 html 元素的字体大小决定的。 此字体大小会被浏览器中字体大小的设置影响,除非显式重写一个具体单位。

当使用em单位时,像素值将是em值乘以使用em单位的元素的字体大小。em 单位转为像素值,取决于他们使用的字体大小。 此字体大小受从父元素继承过来的字体大小,除非显式重写与一个具体单位。

重点理解:

有一个比较普遍的误解,认为 em 单位是相对于父元素的字体大小。 事实上,根据W3标准 ,它们是相对于使用em单位的元素的字体大小。 父元素的字体大小可以影响 em 值,但这种情况的发生,纯粹是因为继承。


今天来讲讲重头戏 rem 的使用,目前在移动端和响应式网站被广泛运用


为什么使用 rem 单位:

rem 单位提供最伟大的力量并不仅仅是他们提供一致尺寸而不是继承。 相反,它给我们的一个途经去获取用户的偏好来影响网站中每一处使用rem的元素大小,不再是使用固定的 px 单位。 为此,使用 rem 单位的主要目的应该是确保无论用户如何设置自己的浏览器,我们的布局都能调整到合适大小。 一个站点最初设计可以专注于最常见的默认浏览器中字体大小 16px。


推荐:纵向的单位可以全部使用px,横向的使用rem,因为移动设备宽度有限,而高度可以无限向下滑动。

rem的兼容性:

目前,IE9+,Firefox、Chrome、Safari、Opera 的主流版本都支持了rem。只用不适配IE8及以下,可以放心大胆的用


rem是只相对于根元素htm的font-size,即只需要设置根元素的font-size,其它元素使用rem单位设置成相应的换算值即可;


问1:在网页设计中我们经常看见body{font-size: 62.5%;}这样的设置,为什么偏偏是62.5%呢?


答:我们知道,浏览器默认的字号16px,1rem=16px;

那么,要表示14px,就是0.875rem,是不太好看且计算起来也比较麻烦的;

为了方便计算,他的62.5%就是10px,时常将在<html>元素中设置font-size值为62.5%: 相当于在<html>中设置font-size为10px,此时,10px=1rem

默认px和rem换算表:

rem和px默认换算表

当html的字体设置为62.5时的换算表

rem和px62.5%时候的换算表

问2:我能否把html的字体写成固定数值如:html{font-size:10px},这样,1rem也等于10px

答:注意:不推荐将html的font-size设置为固定字体,这样浏览器会对字体大小重写,一些设计师使用结合 rem 单位的方式给html元素设置了一个固定的px单位。 这是很普遍的做法,所以改变html元素的字体大小时,可以使整个页面做相应调整 我强烈反对种做法,因为它重写继承了用户设置的浏览器字体大小。 更夸张的说,这剥削了用户自行调整以获得最佳视觉效果的能力。 如果您确实需要更改 html 元素的字体大小,那么就使用em,rem单位,这样根元素的值还会是用户浏览器字体大小的乘积。 这将允许您通过更改您的 html 元素的字体大小,调整你的设计,但仍会保留用户的浏览器设置的效果。

(在Chrome浏览器下,当font-size小于12px时,浏览器会按12px计算,即使设置成 10px 最终都会显示成 12px,是因为谷歌觉得小于12像素,则页面文字会不利于阅读,所以会有最小设置。当把html的font-size设置成10px,子节点rem的计算还是以12px为基准,所以网上很多文章提到的将html的font-size设为10方便计算不是那么可取)。


问3:但是如果设置html{font-size:62.5%}

例如一个div的宽原先是100px 高是100px,字体大小是14px

按照我们原先的思想 width:10rem &  height: 10rem & font-size:1.4rem

可是现实中没有达到我们的预期,实际结果是 width:120px (width:10rem) && height: 120px(height:10rem) &&font-size:14px(1.4rem)

彻底懵逼了,为什么字体生效了,宽高没有生效,怎么可能。。。。。


答:62.5%这是个坑,如果这样设置的话,width,height和line-height就是以12px为基准的,因为谷歌浏览器中最小字体是12px,所以就算html中设了62.5%(10px大小),最终也会强制使用12px,所以你设置高度为10rem其实是10*12=120px,而不是100像素

这时候我们知道原因了,解决问题也很简单,只要设置html默认的字体大于12px即可也就是html{font-size:75%},但是这样会造成实际项目中换算麻烦,所以一般我们可以乘以10,方面换算

可以这样设置html{font-size:625%},16px字体就是0.16rem



综上所述:rem的用法示例

html{font-size:625%}
//1rem=100px;

div{
    width:1rem;
    height:2rem;
    font-size:0.16rem;
}
等同于
div{
    width:100px;
    height:200px;
    font-size:16px;
}


小米技术社区

本站内容均为小米原创,转载请注明出处:小米技术社区>> 响应式网站和移动端为什么建议用rem,而不是em和px