深入了解页面的宽高

大杀器rem

我们可以知道，页面主体中规中矩，分为两部分：上半部分是介绍页面，下半部分是主体界面，有一个点击按钮来负责全部用户交互，为了适配iphone4到6plus以及众多安卓，我们对整个页面的架构可以有如下几种方案：

高度百分比

高度百分比方案——整个屏幕的主要高度高度都用百分比定位，比如介绍部分占高度的百分之30，点击抢红包部分占剩下的百分之70。

优点——易于理解好上手
缺点——由于行内样式，行间样式和它们的父子元素具有复杂的宽高关系，因此内部，比如介绍部分的内部的诸多元素想必还要用到px，em等定位方式，因此不那么和谐和有保障，容易小屏溢出或者大屏留白。在这个页面表现为倒计时文字部分和帮谁谁谁砍价的部分难以控制。

flex按列布局

flex布局是一个很不错的方式：对于这个页面，我们可以有如下构想：对于介绍部分，用px或者em定位和布局，而对于剩下的部分则用flex让他填充好下边的空间，再用绝对定位让砍价按钮水平垂直都居中，简直丝滑。

优点——丝滑。
缺点——要硬说有什么缺点的话，那么下端宽度不好控制算一个吧，试想这样构建出来的页面可能会在iphone4中下端一个按钮几乎占满，而在6普拉斯中则会有大量留白。

大杀器rem

我们知道在rem出来之前，em有着定位根为父元素的天然缺陷，比如在这样的页面中。
html>body>div.parent>div.son
有这样的css:

注意以上css写法用了sass。html也简写了。

然后你猜son的字体是多少px？是20，没错。因为他的参照元素是.parent元素，而不是根，这样的话嵌套多了谁敢用em。

幸好rem的横空出现解决了这种问题：rem的参照物就是根元素的font-size，这让我们对于不同的页面有了设置全局标准的可能，大屏幕，我可以设置大的字体单位，小屏幕设置小的。一举解决了百分比定位和flex布局的遗留问题。

怎样确定字体单位呢？有两种方法，第一种比较优雅：媒体查询，我们可以用媒体查询看看浏览设备的宽高，然后设置一个合适的字体单位，另一种方法比较精确，那就是用js去算。

body宽度document.body.clientWidth
body高度document.body.clientHeight
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

计算方法是这样的，对于这个页面来说:

假设：设计稿高度1500px，设计稿中介绍部分高度300px，倒计时字体大小40px，屏幕高度1000px。

第一步：计算单位：html的font-size = 屏幕高度 / 100 –>10px;

第二步：介绍部分设置成高度30rem。

第三步：字体大小设置成4rem。

啊哈，发现他的优点了嘛，没错，全局等比放大的适应。这就意味着，你在6plus里面能看的页面，在iphone4里面同样能看，而且不会因为屏幕小而发生元素交叠的情况，也不会因为屏幕大而出现留白的情况，是我目前最喜欢的一种表达方式。

优点：做到了完美适配。

缺点：只是等比放大，小屏下字体小，大屏下字体大（不过从经验来讲，字体的大小并不明显，因为屏幕在那呢，看着也舒服）。

缺点反驳：我觉得只有一套设计稿，大小屏幕都兼顾完美是不可能的，因为你不知道什么时候该让一个字占用绝对20像素还是绝对是屏幕宽度的百分之五。如果要做到兼顾，也是可以的：用多套设计稿+css媒体查询为不同宽度的页面写好不同的css样式。

对于多屏页面。

1.

在reset.css页面加入媒体查询来根据不同的宽度定好字体单位。

2.

大杀器rem

使用方法同上，不过上面是根据高度来确定字体单位，这里可以用宽度来确定字体单位。

让页面在都完美显示算是我实习期间的研究之一，经过了比较，我还是用大杀器rem觉得比较方便一些，当然还有诸多方法值得尝试，比如rem+flex等等，如果有不当之处，还请各位前辈抨击，批评，丢石头给我，感谢前辈和同行的指点！