em rem vw vh

一直想写一个关于em和rem的总结，无奈最近因为毕业论文还有工作原因耽搁了！

刚抽出时间，笔者就想起来博客园估计是要长草了！

不怕！今天就是来除草的！

每次写页面的时候，笔者总是手机页面居多，由于工作量不多计算简单，所以我就直接以100%设计页面布局，尽管我知道一旦页面复杂就尴尬了！做到pc端呢，由于美工小姐姐也没有想到自适应，反而就没有要求自适应，所以pc笔者一直也没有做自适应，虽然事实是这样，可是自适应这种东西，早晚都要用得着啊！

有一次笔者尝试着用rem写个页面，本来以为挺简单，后来发现···并没有阿喂！

好吧！既然你这么变态！就更加坚定了我要学习rem的决心！

首先我是觉着，这个rem是针对于字体大小而存在，虽然他真正的广泛用处把笔者整个人打肿了，不过我还是要坚持这个理念的！只要笔者还有一口气，我就要坚持到死！

在学习之前，我觉着首先要明白的是什么叫弹性布局？

我们都知道，我们的浏览器默认的字体的大小是16px，也就是说，一般情况下：body{font-size：16px}，当然啦，如果想要改变是可以通过UI控件改变的！想改变直接ctrl+或者ctrl-就可以啊！

又知道em是一个相对单位，而且可以指定到小数点后三位，如：0.134em；不过这只是一个相对单位，相对的sei呢？就是他的父元素的font-size！不过这里只是说字体大小，其他的也是一样的！

既然默认字体是16px了，那接下来就方便多了，只要你学过加减乘数，都不事儿！不过这个em在IE下面可能会有毛病！为了避免这个毛病，我们要一个设置：html{font-size:100%；}

举个最简单的栗子：

这里就是设置了一个960px的容器；

笔者看过无数人对于em的总结，不过总体来看，其实很简单，就是计算的时候，只有字体的公式是：自身字体em大小=1/父元素字体大小 x 自身字体的大小；

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　  而其他属性的公式则是：自身em大小=1/自身字体大小 x 自身像素大小；

 

 栗子如上

但是！但是！！但是！！！要知道，如果自身没有设置大小，那么就是继承父元素的字体大小，换句话说，这种情况下，也是按照父元素来的！总而言之，其实都是依照自己的字体大小而设置的其他元素的大小的！

但是你知道吗？这样做只能说是你在放大小的时候不会把布局弄乱，但是字体什么的根本没有自适应！

所以我总结的就是：em根本和px比没有什么特别大的优势，非要说一个的话，就是它可以牵一发而动全身，这对于不做相应设计的来讲，基本就是没什么用的！因为它到底还是计算成了像素！

··························································································没错！我是华丽的分割线！···············································································

em暂时到这里！下面讲述rem！

先来一个关于不同分辨率下调整html的font-size的函数：

(function (doc, win) {

  var docEl = doc.documentElement,

    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

    recalc = function () {

      var clientWidth = docEl.clientWidth;

      if (!clientWidth) return;

      docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';

    };

  if (!doc.addEventListener) return;

  win.addEventListener(resizeEvt, recalc, false);

  doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window);

 

针对于rem，其实他和em是一样的，只不过他是针对于根元素来计算的。

有的时候，我们想着方便，会把html的font-size设置成62.5%，这样就是10px的大小，其实这样反而是弄巧成拙了，怎么说呢》要知道，人家chrome的最小字体大小是12px，一旦小于这个限制，人家就按12px计算了，你还嘚瑟啥啊？后面跟个智障一样一通算，最后全部错了，就问你尴不尴尬？尴尬死了！

而且要记住，即便是你用了rem，也要考虑到人家的兼容性啊，最好在每一个rem前面都写一些px的，这样起码可以保证优雅降级啊！

所以我的最终方案就是：当我想要写一个自适应的页面时，不让字体去自适应屏幕，而是让外面的自适应字体，比如我们把元素设置为宽度为50em，不管字体设置为多大，都只能容纳50个字。这仅限于同一级别，千万别父元素设置宽，子元素再设置字体大小，那样是不对的！

 

 ·················································································没错！我是华丽的分割线！·············································································

 最后说一下vw和vh！其实这两个笔者觉得是相当好用的，起码他是适用于屏幕大小的，对于手机端来讲，这无疑是雪中送炭，笔者心中的朱砂痣啊！但是它的兼容性还是有毛病的，并不针对于所有浏览器！无奈摊手，还是不行啊！因为我们平常开发，还是要考虑一下普通人的感受的啊！

不过用法还是要记载一下的，万一那一天，人家翻身农奴把歌唱了呢！

vw和vh都是百分比的用法，假如你的屏幕宽度是100mm，那10vw就是10mm，也就是10%的宽度，是不是很简单的用法！

唉···  如果这个兼容性调好了该有多好！也不用这么愁了···  怪自己能力不够啊！

而且我发现一件非常神奇的事情，这个事情只发生在安卓手机上，奏四！人家的高100%都是针对于整个手机的100%。但是假如你在做一个登录注册页面吧，那里不是有input框吗？一点点击文本框，背景图的100%就会默认为除了键盘之外的100%，这一点很鸡肋！以至于我做的时候直接把html{background：#自己的颜色；height：100vh；}了！

············································································没错！我是华丽的分割线！················································································

 

所以笔者最后得出结论，当我们需要手机字体大小自适应的时候，最好的办法就是：用媒体查询啊！下面是合适的分布，可以借鉴哦~

@media only screen and (max-width:300px) {
}
@media only screen and (max-width:310px) and (min-width:300px) {
}
@media only screen and (max-width:320px) and (min-width:310px) {
}
@media only screen and (max-width:350px) and (min-width:320px) {
}
@media only screen and (max-width:360px) and (min-width:350px) {
}
@media only screen and (max-width:400px) and (min-width:360px) {
}
@media only screen and (max-width:470px) and (min-width:400px) {
}
@media only screen and (max-width:480px) and (min-width:470px) {
}
@media only screen and (max-width:540px) and (min-width:480px) {
}
@media only screen and (max-width:560px) and (min-width:540px) {
}
@media only screen and (max-width:570px) and (min-width:560px) {
}
@media only screen and (max-width:630px) and (min-width:570px) {
}
@media only screen and (max-width:640px) and (min-width:630px) {
}
@media only screen and (max-width:710px) and (min-width:640px) {
}
@media only screen and (max-width:720px) and (min-width:710px) {
}
@media only screen and (min-width:720px) {
}