单屏页面响应式适配玩法

首先瞅一下效果图

点击查看视频

接着就是思考怎么做,我的想法如下图。

image

把公共的 页头页脚导航栏边框 放到最顶层,比方说设置层级为 999,其他每个独立页则放在下面,然后切换页面的时候更新独立页的层级以达到效果图的效果(当然不能超过最顶层)。

适配

上面的方式已经把效果做出来了,接下来就是响应式适配了。

1、Mac OS + Chrome

先考虑一下我自己的系统及显示器,

MacBook Pro 1440 x 900 + 外设 hp 1920 x 1080

也就是说 Chrome 的网页可视区高度大概为: 900(或1080) - 180 = 720px

180 = 60 + 20 + 100

2、Windows + Chrome

然后我们再看看 Windows + Chrome 的情况,以 1366 x 768 为例,

Chrome 的网页可视区高度大概为 768 - 150 = 618px

150 = 40 + 110

3、总结上面两点

  1. 以上两点的高度计算通过截图获得,可能会有些许误差。
  2. 所以不管在哪种系统下,浏览器的宽度与分辨率是保持一致的(程序坞在底部的时候,程序坞在左右两边一般情况对宽度没有影响),高度则根据系统及浏览器的不同各有不同,比方说 Safari 没有书签高度。
  3. 不同系统加浏览器占用的最高高度约为 180,最小约为 0(全屏的时候)

4、主流系统分辨率尺寸

然后我们看下当前主流系统及分辨率有哪些

PC & MAC & Chrome

PC & Windows & Chrome (或 PC & MAC & Chrome & 外设显示器)