摘要：单屏适配有或，多屏常见是依宽。整层适配为确保各层元素同步缩放，不走样，每层的适配区应当等于设计稿大小。直接的实现就是构造和适配区一样尺寸的容器，整层适配。值为时对应适配。这下妈妈再也不用担心我还原问题屏幕适配问题了。
转载请注明出处：http://hai.li/2018/03/14/h5-screen-adaptation.html
设计大大，这次真的是 "按设计稿来" 了，因为现在，任何机子都是设计稿标准机！ 开发同学，这下你就直接读设计稿标注就好了啦！
屏幕适配屏幕适配应当指内容 适配区 和 屏幕区 间的适配关系。
单屏适配有 contain、cover 或 fill，多屏常见是 依宽 。
contain 和 cover 还需要 定位 来处理留白和超出的内容。
而同一个 H5 里不同内容往往用不同适配方式，即 分层。
页面加载后 js 往往需要延时至少 70ms 才能获取正确的 webview 宽高
css 往往最先执行，且 cssom 的解析往往和 dom 在最开始并行构建
js 会等待 dom 和 cssom 处理完后才能执行，而 css 只需等待 dom
相比 js 在切换横竖屏时要切换 2 次进程来重绘，css 无需切换
对于屏幕适配这类表现问题，能用 css 实现就应该用 css 实现。
整层适配为确保各层元素同步缩放，不走样，每层的 适配区 应当等于设计稿大小。
直接的实现就是构造和 适配区 一样尺寸的 容器， 整层适配。
容器 内可以有若干个相同适配方式的 元素。
以 svg 实现为例：
实际效果：
整层适配 实现简单，开发时直接读取设计稿值，可以满足大部分静态页面需求。
但在 h5 动画多的时候，就得考虑动画流畅，页面性能了。
用可替换元素如