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

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

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

起因

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

  • 为什么这个 rem 设置了没有效果呢？
  • 用了 rem 后，不同的手机分辨率是怎么计算的呢？
  • 我是用了 rem 的方式来计算了啊，为什么在 iPhone 5 里面字那么小？
  • 如果用 rem 的话，设计稿上的 32px 的字我应该怎么计算呢？
  • 设计师给的 PSD 上的 32px，那么用 rem 的话要怎么计算？
  • body 中的 font-size 是 62.5%，那么这个 rem 要怎么计算呢？
  • 我可以用 rem 做自适应吗？
  • ……

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

纳闷

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

我猜可能是这样：

  • 屏蔽了群，只有当自己有问题的时候再出来直接丢问题（或者可能几个群都会有同样的问题）；
  • 看了别人的提问，感觉与自己无关，不关心；
  • 那是别人的问题，到时候有需要再说，反正现在用不上；
  • 看过就好了，懒得去翻资料；
  • 这个问题先记录着，以后再看（结果就是没有以后，直到自己遇到）；
  • ……

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

自己的感想

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

  • 这里有很多同行，谈论的技术很多是自己没接触的也是想要了解的，加群同时屏蔽，有需要再看；
  • 专注于讨论技术，管理员可以会严格管理群，加群并适当参与讨论学习；
  • 同行平时接触过，有点水的群，加群同时必须屏蔽，偶尔出来露露脸；
  • 水群，有一个或者两个就可以了，并且群内人数不多，加群偶尔放松一下紧张的工作状态；
  • 同事群、亲人群，这个加群后应该就不会有太多什么信息，可以考虑屏蔽；

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

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

谈一下 rem

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

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

  • rem 是相对于根元素的 font-size 而变化的，只要 html 标签的 font-size 变化了，那么 DOM 节点中存在 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 中可以看到，当我们定义了 html 的 font-size 是 100px 的时候，就已经开始对 rem 的计算设定了一个基准，后续出现的 rem 的单位值只要根据这个 100px 来计算就可以了。

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

p {font-size: 20px; width: 200px; height: 100px;}
  • font-size：0.2*100=20；
  • width：2*100=200；
  • height：1*100=100；

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

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

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

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

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

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

  • 动态改写 <meta> 标签；
  • 给 <html> 元素添加 data-dpr 属性，并且动态改写 data-dpr 的值；
  • 给 <html> 元素添加 font-size 属性，并且动态改写 font-size 的值；

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

最后

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