从前我写过一篇《翻页H5全分辨率适配最佳实践》，那篇对于不同屏幕不同分辨率下的适配讲的太简单，其实是我想的太简单。想要尽可能完美的适配，其中的花花还是有很多的。

工作台分辨率

从前我讲了，工作台以320x520作为标准分辨率，然后让浏览器根据initial-scale来放大显示。

div层级关系

我认为的比较理想的层级关系是：

div.ancestor>div.page>div.editarea>div.element

也就是说：

1、div.ancestor是祖先层，每个人有自己的写法，在本文里不说，但是宽高必须是视口宽高，也就是百分之百。

2、page层，负责设背景图，它的宽高都始终是百分之百，也就是视口宽高。

3、editarea层，这个层作为一个调整层最重要，下文有详细说明。

4、element层，是具体浮动元素，也就是内容。

内容布局

今天主要讲讲内容布局。由于我们要适配高视口和矮视口，而320x520是最高的视口，所以，设计师做设计，内容注定不应该充满整个画面，也就是说，内容不能从顶线一直铺到底线。既然要有一定的空隙，那么就涉及到空隙留在什么地方。具体分成四种情况：（1）内容居中（2）内容居上（3）内容居下（4）内容占满。

这就相当于word里面的：（1）居中（2）左对齐（3）右对齐（4）两端对齐。可以对照想象一下。

下面分别讲述。

主体内容集中在中部，上下留白

这种布局是最主流的布局，设计师要求程序员：

1、浮动元素集中在中部，留天留地。

2、背景图的主体元素也在中部，留天留地。

应对设计师的这种要求，程序员应该做的是：

1、背景图：

background-position: 50% top;
background-size: cover;

2、editarea样式：

.editarea{
  position: relative;
  width: 100%;
  top: calc((100% - 520px) / 2);
  height: 520px;
}

这里注意top: calc((100% - 520px) / 2);的妙用，简单说，我们希望editarea跟祖先元素中心点重合，也就是居中对齐，而且希望editarea的高度大于视口，是固定值520px。如下图所示：

Paste_Image.png

为什么要这么搞呢？为什么editarea的高度不能是视口100%呢？

因为这涉及到浮动元素的定位问题。我们可以用top、left、bottom、right定位一个元素，但并不存在一种叫center的属性，也就是说我们没办法简单的以容器中心点为坐标来定位元素，只能从四个边开始丈量。

当我们以320x520为画布，摆放好了所有的浮动元素，每个浮动元素都有自己的top值，假设editarea的高度是视口100%，那么非常靠近底部的元素，在视口中就会被裁剪。这当然不是我们想要的。因此，我搞一个向上的偏移，这就让所有浮动内容都在手机屏幕中显示了出来。

3、浮动元素：原则上都使用top: xxxpx，不使用bottom: xxxpx，除非你确定某个浮动元素必须下对齐，而且它在任何视口都不影响其他元素，也不影响背景。另外，浮动元素绝对不允许吸顶或者吸底，因为这样百分百会被裁剪。

主体内容在上方，从上向下铺内容

设计师要求程序员：

1、浮动内容，必须从顶部开始往下排列，到屏幕的底部的时候没有主体内容。比较高的视口下，底部会看到一些无内容区，比较矮的视口下，底部被裁剪。

2、背景图，优先显示顶部内容，背景图的底部不设计实质内容，可以被窗口裁剪。

应对设计师的这种要求，程序员应该做的是：

1、背景图：

background-position: 50% top;
background-size: cover;

2、editarea样式没啥特别的：

.editarea{
    position: relative;
    width: 100%:
    height: 100%;
}

简单解释这里为啥不用top修正位置了呢？因为你的内容要求从顶部往下排，当然就不用修正位置了。

3、浮动元素：原则上都使用top: xxxpx，不使用bottom: xxxpx，除非你确定某个浮动元素必须下对齐，而且它在任何视口都不影响其他元素，也不影响背景。

主体内容全部在下方，从下往上铺内容

这个跟上面相反，内容集中在下部，比如，设计师做了一个舞台，这个舞台是重点，不允许被裁剪，如果裁剪的话，站在舞台上的人就等于悬空了，而且，这个舞台决不允许被裁剪，哪怕是裁剪一部分都会让人看不懂这是个什么东西。这种情况就是所谓主要内容在下部。

Paste_Image.png

此时设计师要求程序员：

1、浮动内容，必须从底部开始往上排列，到屏幕的顶部的时候没有主体内容。比较高的视口下，顶部会看到一些无内容的天花板，比较矮的视口下，天花板允许被裁剪。

2、背景图，优先显示底部内容，背景图的顶部不设计实质内容，可以被裁剪。

应对设计师的这种要求，程序员应该做的是：

1、背景图：

background-position: 50% bottom;
background-size: cover;

2、editarea样式跟上面一样：

.editarea{
    position: relative;
    width: 100%:
    height: 100%;
}

3、浮动元素：原则上都使用bottom: xxxpx，不得使用top: xxxpx，除非你确定某个浮动元素必须在顶部，而且确认它在任何视口都不影响其他元素，也不影响背景。

主体内容占满全屏

这个就有点意思了，也就是说：

设计师要求程序员：

1、屏幕顶部的内容必须全露，而且尽量吸顶。

2、屏幕底部的内容也必须全露，而且尽量吸底。

3、屏幕中央的内容占据的面积可大可小，比较疏松，均匀分布。

这种“主体内容占满全屏”的例子有：

1、弹幕，假设你设定弹幕有10行，要求铺满全屏，那么就是从顶部开始均匀往下铺10行。弹幕当然不允许被裁剪，而且必须均匀分布。高视口下，行间距就大一点，低视口下，行间距就小一点。

2、局部滚动列表，这个列表尽管是局部滚动的，但是我们当然希望它尽量占满全屏。

应对设计师的这种要求，程序员应该做的是：

1、背景图：

background-position: 50% 50%;
background-size: cover;

2、editarea样式跟上面一样：

.editarea{
    position: relative;
    width: 100%:
    height: 100%;
}

3、浮动元素：如果要均匀分布，原则上都使用top: xxx%，注意，用百分比，而不用px值。

类总结

page层：

.bpt {
    background-position: 50% top;
}

.bpb {
    background-position: 50% bottom;
}

page层默认是background-position: 50% 50%;，根据需要再追加.bpt或.bpb。

editarea层：

.editarea {
    position: relative;
    margin: 0 16px;
    width: 288px;
    height: 520px;
    top: calc((100% - 520px) / 2);
    tap-highlight-color: transparent;
    overflow: hidden;
}

.editarea-w100 {
    margin: 0;
    width: 320px;
}

.editarea-h100 {
    height: 100%;
}