设计方案大大，这次真的是 "按设计方案稿来" 了，由于如今，任何机子全是设计方案稿规范机！ 开发设计同学，这下你就立即读设计方案稿标明就行了啦！
显示屏兼容
显示屏兼容理应指內容 兼容区 和 显示屏区 间的兼容关联。
单屏兼容有 contain、cover 或 fill，多屏普遍是 依宽 。
contain 和 cover 还必须 精准定位 来解决留白和超过的內容。
而同1个 H5 里不一样內容常常用不一样兼容方法，即 分层。
优选CSS
针对显示屏兼容这类主要表现难题，能用 css 完成就应当用 css 完成。
整层兼容
为保证各层元素同歩放缩，不走样，每层的 兼容区 理应等于设计方案稿尺寸。
立即的完成便是结构和 兼容区 1样规格的 器皿， 整层兼容。
器皿 内能够有若干个同样兼容方法的 元素。
以 svg 完成为例：
<!doctype html>
<html>
<body>
<style>
.layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<!-- fill -->
<svg class="layer" viewBox="0 0 1080 1920" preserveAspectRatio="none"> <!-- 器皿 -->
<rect x="0" y="0" width="1080" height="1920" fill="rgba(96,96,96,.08)"/> <!-- 元素 -->
</svg>
<!-- contain 垂直居中 -->
<svg class="layer" viewBox="0 0 1080 1920" preserveAspectRatio="xMidYMid meet"> <!-- 器皿 -->
<rect x="0" y="233" width="1080" height="1407" fill="#1565C0"/> <!-- 元素 -->
</svg>
<!-- contain 居底 -->
<svg class="layer" viewBox="0 0 1080 1920" preserveAspectRatio="xMidYMax meet"> <!-- 器皿 -->
<rect x="444" y="1779" width="191" height="39" fill="#1565C0"/> <!-- 元素 -->
</svg>
</body>
</html>
具体实际效果：
整层兼容 完成简易，开发设计时立即载入设计方案稿值，能够考虑绝大多数静态数据网页页面要求。
但在 h5 动漫多的情况下，就得考虑到动漫顺畅，网页页面特性了。
用可更换元素如 <img> <object> <svg> 等做 器皿，和用情况图做 元素 的，
在运用 css 动漫时性爱能缺点：
为这些完成计划方案提高特性就要对于 器皿 动漫，并减小 器皿 的规格，最好是是和1层里全部 元素 的最少总面积相同，保证 精简兼容
精简兼容
公式
推导全过程见 H5 分层显示屏兼容公式推导
设计方案稿
宽 v
高 g
兼容前元素
横座标 x
纵座标 y
宽 w
高 h
兼容后器皿
横座标 x3 = x*u/v
纵座标 y3 = y*f/g
兼容后元素
横座标 x4 = m*u + (x - m*v)/w*w1 = m*v/w*w3 + (x - m*v)/w*w1
纵座标 y4 = n*f + (y - n*g)/h*h1 = n*g/h*h3 + (y - n*g)/h*h1
宽 w3 = (w/v)*u
高 h3 = (h/g)*f
当 contain 方法兼容时
放缩值 s = Math.min(f/g, u/v)
横向左留白占总留白 o = (m*v - x)/w
纵向上留白占总留白 p = (n*g - y)/h
当 cover 方法兼容时
放缩值 s = Math.max(f/g, u/v)
横向左超过占总超过 o = (x - m*v)/w
纵向上超过占总超过 p = (y - n*g)/h
兼容区
竖直居顶时 m = 0
竖直垂直居中时 m = .5
竖直居底时 m = 1
水平居左时 n = 0
水平垂直居中时 n = .5
水平居右时 n = 1
相比整层兼容运行内存提升 (w3*h3)/(v1*g1) >= w*h/(v*g)
<img> 完成示例
当设 max-width 为 w/v，max-height 为 h/g 时对应 contain 兼容。
当设 min-width 为 w/v，min-height 为 h/g 时对应 cover 兼容。
当设 width 为 w/v，height 为 h/g 时表明 fill 兼容。
contain 兼容时，假如照片初始规格小于 max-width 和 max-height 时，用 zoom: 10 变大或立即改动照片初始规格。
cover 兼容时，假如照片初始规格超过 min-width 和 min-height 时，用 zoom: .1 变小或立即改动照片初始规格。
因 top left 中百分比为相对性显示屏宽 u 和高 f 的，对应 m*u 和 n*f
因 transform 中百分比为相对性兼容后元素宽 w1 和高 h1 的，对应 (m*v + x)/w*w1 和 (n*f + y)/h*h1
<!doctype html>
<html>
<body>
<style>
img {
/* min-width 和 min-height 组成了虚似的器皿 */
min-width: 50.37037037037037%; /* w3 = (w/v)*u 在其中 w = 544，v = 1080 */
min-height: 7.395833333333333%; /* h3 = (h/g)*f 在其中 h = 142，g = 1920 */
zoom: .1;
/* x4 = m*u + (x - m*v)/w*w1 */
/* y4 = n*f + (y - n*g)/h*h1 */
position: absolute;
left: 50%; /* m*u 在其中 m = .5*/
top: 50%; /* n*f 在其中 n = .5 */
transform:
translateX(⑷8.34558823529412%) /* (x - m*v)/w*w1 在其中 x = 277，m = .5，v = 1080，w = 544 */
translateY(378.8732394366197%); /* (y - n*g)/h*h1 在其中 y = 1498，n = .5，g = 1920，h = 142 */
}
</style>
<img src="http://ui.qzone.com/544x142"/> <!-- 元素 -->
</body>
</html>
background 完成示例
background-size 值为 contain 时对应 contain 兼容。background-size 值为 cover 时对应 cover 兼容。background-size 值为 100% 100% 时对应 `fill 兼容。background-position 百分比和 o p 实际意义同样
<!doctype html>
<html>
<body>
<style>
div {
position: absolute;
width: 50.37037037037037%; /* w3 = w/v*u 在其中 w = 544，v = 1080 */
height: 7.395833333333333%; /* h3 = h/g*f 在其中 h = 142，g = 1920 */
background: url(http://ui.qzone.com/544x142) no-repeat; /* 情况图做元素 */
background-size: cover;
left: 25.648%; /* x3 = x/v*u 在其中 x = 277， v = 1080 */
top: 78.02083333333333%; /* y3 = y/g*f 在其中 y = 1498， g = 1920 */
background-position-x: ⑷8.34558823529412%; /* o = (x - m*v)/w 在其中 m = .5 ， v = 1080，x = 277，w = 544*/
background-position-y: 378.8732394366197%; /* p = (y - n*g)/h 在其中 n = .5 ， g = 1920，y = 1498，h = 142*/
}
</style>
<div></div> <!-- 器皿 -->
</body>
</html>
<svg> 完成示例
preserveAspectRatio 的 meetOrSlice 为 meet 时对应 contain 兼容。preserveAspectRatio 的 meetOrSlice 为 slice 时对应 cover 兼容。preserveAspectRatio 值为 none 时对应 fill 兼容。preserveAspectRatio 的 meetOrSlice 相对性的是器皿，并不是 兼容区 这里用 transform 来精准定位，而 preserveAspectRatio 的 meetOrSlice 固定不动为 xMinYMin。
<!doctype html>
<html>
<body>
<style>
svg {
position: absolute;
width: 50.37037037037037%;
height: 7.395833333333333%;
/* x4 = m*v/w*w3 + (x - m*v)/w*w1 */
/* y4 = n*g/h*h3 + (y - n*g)/h*h1 */
top: 0;
left: 0;
transform:
translateX(99.26470588235294%) /* m*v/w*w3 在其中 m = .5，v = 1080，w = 544 */
translateY(676.056338028169%); /* n*g/h*h3 在其中 n = .5，g = 1920，h = 142 */
overflow: visible;
}
svg image {
transform:
translateX(⑷8.34558823529412%) /* (x - m*v)/w*w1 在其中 x = 277，m = .5，v = 1080，w = 544 */
translateY(378.8732394366197%); /* (y - n*g)/h*h1 在其中 y = 1498，n = .5，g = 1920，h = 142 */
}
</style>
<svg viewBox="0 0 544 142" preserveAspectRatio="xMinYMin meet"> <!-- 器皿 -->
<image width="544" height="142" xlink:href="http://ui.qzone.com/544x142"/> <!-- 元素 -->
</svg>
</body>
</html>
輔助专用工具
手动式测算百分如果写 css 很不便，能够依靠 sass 等专用工具来輔助简化。
设计方案稿宽 v 高 g 1般是网页页面级变量定义。
只需载入设计方案稿里每一个 元素 的横座标 x 、纵座标 y 、宽 w 和 高 h，随后专用工具转化成 css 便可。
这下妈妈不再用担忧我复原难题、显示屏兼容难题了。
文本解决
文本固定不动或单行不固定不动，svg 的 text 标识能够解决
文本固定不动或单行不固定不动还能够将文本变为照片
文本多行不固定不动，能够依靠 svg 的 foreignObject 嵌入一般 div
计划方案比照
显示屏兼容计划方案十分多，选哪样方法完成 整层兼容 或 精简兼容，下面是比照
计划方案
放缩
精准定位
文本放缩
适配
padding-top 百分比
只能依宽
✓
✗
✓
viewport
✓
✗
✓
适用状况繁杂
object-fit
✓
✓
✗
挪动端 android 4.4.4+
svg preserveRatio
✓
✓
✓
挪动端 android 3.0+
(max/min)-(width/height)
✓
✓
固定不动文本
✓
background-size
✓
✓
文本转照片
✓
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。
Copyright © 2002-2020 快速建站_网站建设系统_免费网页建站_网站免费建设_建站系统 版权所有 （网站地图） 粤ICP备10235580号