别说 rem 是什么自适应

有时候总是会忍不住想要去吐槽点什么,尤其是在一些 QQ 群里看到别人提问的时候。不过可能会有不少朋友认为,你完全可以不要在 QQ 群里跟他们一起,退群啊,为什么要在群里浪费你自己的时间呢。

是啊,为什么我要在一些 QQ 群里浪费时间呢。其实,说实在话,目前所在的几个 QQ 群也就是那么几个是前端相关的群,其他大部分都是几个朋友偶尔扯扯淡的群。然而就是在那么几个 QQ 群里,有时候我发觉自己其实可以了解到很多自己不曾了解到的内容,那么我为什么要退群呢。

既然不退群,那么我就由着自己的性子来吐槽一下吧。

起因

要说起因无非也就是在 QQ 群里经常看到有人问类似这样的问题:

诸如此类的问题是十分频繁的见到。当然,这些问题是根据回忆大概写的,不保证百分百一模一样的提问内容。

纳闷

看到这些问题,我十分纳闷,原本大家都在一个群里,那么当有人提问过一次之后,为什么就不去看一下这个 rem 是什么,应该怎么用呢,而是会反反复复地出现同个问题呢。

我猜可能是这样:

或许还有其他的一些可能性,我编不出来了。

自己的感想

在做一件事情之前,心里还是会想为什么我要做这个事情。那么我个人加一个群的时候,我肯定也会考虑一下加这个群的目的是什么。

以上几点是目前个人加群的一些情况,对于技术群,加入了肯定是希望能在群里获取到一些信息,比如一些朋友的提问适当的自己思考一下,会增加一些经验等等。

在技术群里,对于自己感兴趣或者自己所处行业(我个人所做的偏向于 CSS)必然是更多的关注,一些新技术在自己不了解的时候就会情不自禁地去翻一下资料,适当再自己做做 demo 来总结归纳一下。

谈一下 rem

前面说的都是一些 QQ 群的事情,然而其实我想吐槽的是关于 rem 这个单位值。对于这个 rem 其实做前端的同学,尤其是偏向于移动端开发的同学并不陌生,而且出现的频率是很高的。对于一个高频率出现的属性值单位,而且是十分有用的一个单位,为什么不多去了解一点呢。十分不解。

当然,必须肯定的一点是,我自己了解的也不够透彻深入,但至少有一点我十分可以肯定。

目前所接触的问题中,很多人提到的是,在移动端 rem 怎么做自适应,rem 怎么计算的。就这样的问题,个人觉得其实这并不是问题。

http://caniuse.com/#search=rem

在这个 caniuse 的网站中,很明显可以看到 rem 所兼容的浏览器并非只有移动端啊,为什么要说 rem 是移动端的呢。然后再说计算,不是只要看 html 标签的 font-size 不就好了么。比如:

html {font-size: 100px;}
p {font-size: 0.2rem; width: 2rem; height: 1rem;}

这个简单的 CSS 中可以看到,当我们定义了 htmlfont-size100px 的时候,就已经开始对 rem 的计算设定了一个基准,后续出现的 rem 的单位值只要根据这个 100px 来计算就可以了。

那么这里最后所得的 p 标签的样式应该是这样的:

p {font-size: 20px; width: 200px; height: 100px;}

最后给每个数值加上 px 单位就好了,毕竟显示器最终显示的效果都是以像素点来计算的。

移动端中所谓的“自适应”

那么在移动端中所谓的用 rem 做自适应,其实并非是自适应,我觉得更应该是响应式。根据不同的设备分辨率等数据,通过 JavaScript 来改变 html 中的 font-size,从而影响 DOM 节点中有 rem 单位的属性。

目前国内大家用的比较多的是阿里无线的那个 Flexible,在大漠的博客中有对这个 Flexible 做了详细的介绍,有兴趣的朋友可以去看看,这里我也就不废话了。

使用Flexible实现手淘H5页面的终端适配:http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

在大漠的博客中也提到了,这个 Flexible 主要的事情是这些:

所以,别再说什么自适应了,更应该是响应式。如果不是用这个 Flexible 的话,我们平时也就是根据项目的具体情况,然后通过 @media 来改变 html 标签的 font-size 而已。

最后

吐槽完毕,我觉得我应该好好温习一下去了。

这篇文章是 林小志_linxz 于 2016-11-08 整理所写的,如果觉得有不对不足的地方,那么请到 https://github.com/linxz/blog/issues 中告知,感谢!

最后不要脸的放一个支付宝的二维码了,如果各位觉得还行,可以鼓励一下的话,那就扫一下吧。^o^