怎么在html5中实现分层屏幕适配

本篇文章为大家展示了怎么在html5中实现分层屏幕适配，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

专注于为中小企业提供网站设计制作、成都网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业获嘉免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了千余家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

屏幕适配

屏幕适配应当指内容 适配区 和 屏幕区 间的适配关系。

单屏适配有 contain、cover 或 fill，多屏常见是 依宽 。

contain 和 cover 还需要 定位 来处理留白和超出的内容。

而同一个 H5 里不同内容往往用不同适配方式，即 分层。

优选CSS

1. 页面加载后 js 往往需要延时至少 70ms 才能获取正确的 webview 宽高

2. css 往往最先执行，且 cssom 的解析往往和 dom 在最开始并行构建

3. js 会等待 dom 和 cssom 处理完后才能执行，而 css 只需等待 dom

4. 相比 js 在切换横竖屏时要切换 2 次进程来重绘，css 无需切换

对于屏幕适配这类表现问题，能用 css 实现就应该用 css 实现。

整层适配

为确保各层元素同步缩放，不走样，每层的 适配区 应当等于设计稿大小。

直接的实现就是构造和 适配区 一样尺寸的 容器， 整层适配。

容器 内可以有若干个相同适配方式的 元素。

以 svg 实现为例：

实际效果：

整层适配 实现简单，开发时直接读取设计稿值，可以满足大部分静态页面需求。

但在 h6 动画多的时候，就得考虑动画流畅，页面性能了。

用可替换元素如