Demon

你就是个倔宝宝!

笔记

rem

已有 357 次阅读2016-10-08 16:52 |系统分类: HTML5/CSS3 |

前端rem单位的正确使用

写这篇文章是因为自己被rem这个坑绊过脚,因此特意去研究了下rem这个单位。

简单阐述下px、em、rem之前的关系(其实网上很多,我这里稍微提一下)。

先抛出一个问题:为什么要选择rem?

px:像素是相对于显示器屏幕分辨率而言的相对长度单位。pc端使用px倒也无所谓,可是在移动端,因为手机分辨率种类颇多,不可能一个个去适配,这时px就显得非常无力,所以就要考虑em和rem。

em:继承父级的,假设html的font-size默认为16px,body字体大小定义为50%,那么在body里字体大小就是1em=8px了。可当你又定义了一个div,然后把字体设置成了50%,请问,现在div下的1em等于多少?因为继承了父级的值,现在这个div里的1em=4px,这么嵌套下去的话,抱歉,我数学不好!所有rem就出现了。

rem:是em的升级版,rem只会相对html的值,不会受到父级的影响,这样的好处在于:从em里的例子来讲,1rem始终会等于8px。使用的时候不需要重新计算rem此时的大小。rem因为是css3增加的,所以ie8或以下请无视(始终想不明白,为什么国人至今对微软都放弃的ie这么恋恋不舍)。

以上也算是讲清了他们之间的区别和关系,rem更多的运用于移动H5页面的适配使用。

下面来说说怎么更方便的使用rem和自己开文处提到的坑!

之前遇到的坑是这样的。浏览器默认的字体大小都是16px(注意这里),所以要使1rem=10px,那么只要在html选择器中声明Font-size=62.5%(10÷16*100%=62.5%)就可以直接使用1rem=10px单位进行换算,其实这个算法是没有错的。可是,哪里来的自信让每个浏览器默认字体都是16px????反正我也不知道自信哪来。。现在Chrome默认大小可以是12px也可以是16px,那么问题来了,国内浏览器,有几个不是用的谷歌内核。所以html选择器中声明Font-size=62.5%,1rem就等于10px的换算就有点坑爹了,对于我这种一个像素都纠结的人来说,很蛋疼。这坑是我当时买书学h5的时候预留下的后遗症,现在这个毛病还有,因为快和方便 T_T!真是矛盾。。。

坑可以填。rem单位还是可以变的容易换算和精准。所以就去找了些工具和资料。

因为rem是相对html的,那么只要将html选择器设置一个绝对大小的值:比如在html选择器设置font-size:20px;那么1rem=20px(解释下为什么是20而不是其他的,首先10的倍数容易计算,那为什么不是10本身而是20?现在Chrome最小的字体是12px,所以10px是无效的,进一步就取20px);现在是不是和效果图一个像素都不差?!!!

且要兼容手机各个分别率,使用媒体查询media 可以设置不同的大小,这样在常规的设备中都可以精准到每一个像素。

这么换算来换算去好麻烦有木有!!所有发现了下面的换算工具,妈妈再也不用说我数学题不会做了!

下面是我直接在工具复制过来的现成rem换算适配代码↓(设计稿宽度:640,字体值:20)

 @media only screen and (max-width: 1080px), only screen and (max-device-width:1080px) {
 html,body {
 font-size:16.875px;
 }
 }
 @media only screen and (max-width: 960px), only screen and (max-device-width:960px) {
 html,body {
 font-size:15px;
 }
 }
 @media only screen and (max-width: 800px), only screen and (max-device-width:800px) {
 html,body {
 font-size:12.5px;
 }
 }
 @media only screen and (max-width: 720px), only screen and (max-device-width:720px) {
 html,body {
 font-size:11.25px;
 }
 }
 @media only screen and (max-width: 640px), only screen and (max-device-width:640px) {
 html,body {
 font-size:10px;
 }
 }
 @media only screen and (max-width: 600px), only screen and (max-device-width:600px) {
 html,body {
 font-size:9.375px;
 }
 }
 @media only screen and (max-width: 540px), only screen and (max-device-width:540px) {
 html,body {
 font-size:8.4375px;
 }
 }
 @media only screen and (max-width: 480px), only screen and (max-device-width:480px) {
 html,body {
 font-size:7.5px;
 }
 }
 @media only screen and (max-width: 414px), only screen and (max-device-width:414px) {
 html,body {
 font-size:6.46875px;
 }
 }
 @media only screen and (max-width: 400px), only screen and (max-device-width:400px) {
 html,body {
 font-size:6.25px;
 }
 }
 @media only screen and (max-width: 375px), only screen and (max-device-width:375px) {
 html,body {
 font-size:5.859375px;
 }
 }
 @media only screen and (max-width: 360px), only screen and (max-device-width:360px) {
 html,body {
 font-size:5.625px;
 }
 }
 @media only screen and (max-width: 320px), only screen and (max-device-width:320px) {
 html,body {
 font-size:5px;
 }
 }
 @media only screen and (max-width: 240px), only screen and (max-device-width:240px) {
 html,body {
 font-size:3.75px;
 }

下载是下载地址,离线和在线都有

离线版本:https://github.com/leon776/grunt-px2rem

在线版本:http://mxd.tencent.com/wp-content/uploads/2014/11/rem.html


标签: 使用rem做距离单位宽高出现问题 举报

收藏 0人收藏
给个赞0人点赞

笔记作者:Demon

笔记链接:

评论
0 /300