从前我写过一篇《翻页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%;
}
网友评论