html5 分层屏幕适配的方法分层屏幕适配的方法
设计大大，这次真的是 "按设计稿来" 了，因为现在，任何机子都是设计稿标准机！ 开发同学，这下你就直接读设计稿标注就
好了啦！
屏幕适配屏幕适配
屏幕适配应当指内容 适配区 和 屏幕区 间的适配关系。
单屏适配有 contain、cover 或 fill，多屏常见是 依宽 。
contain 和 cover 还需要 定位 来处理留白和超出的内容。
而同一个 H5 里不同内容往往用不同适配方式，即 分层。
优选优选CSS
页面加载后 js 往往需要延时至少 70ms 才能获取正确的 webview 宽高
css 往往最先执行，且 cssom 的解析往往和 dom 在最开始并行构建
js 会等待 dom 和 cssom 处理完后才能执行，而 css 只需等待 dom
相比 js 在切换横竖屏时要切换 2 次进程来重绘，css 无需切换
对于屏幕适配这类表现问题，能用 css 实现就应该用 css 实现。
整层适配整层适配
为确保各层元素同步缩放，不走样，每层的 适配区 应当等于设计稿大小。
直接的实现就是构造和 适配区 一样尺寸的 容器， 整层适配。
容器 内可以有若干个相同适配方式的 元素。
以 svg 实现为例：
<!doctype html>
<html>
<body>
<style>
.layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
资源评论
