html5 分层显示屏兼容的方式

日期:2020-12-12 类型:科技新闻 

关键词:制作小程序,小程序商城,扫码点餐小程序,微信小程序开店的步骤,牛刀小程序

设计方案大大,这次真的是 "按设计方案稿来" 了,由于如今,任何机子全是设计方案稿规范机! 开发设计同学,这下你就立即读设计方案稿标明就行了啦!

显示屏兼容

显示屏兼容理应指內容 兼容区 和 显示屏区 间的兼容关联。

单屏兼容有 contain、cover 或 fill,多屏普遍是 依宽 。

contain 和 cover 还必须 精准定位 来解决留白和超过的內容。

而同1个 H5 里不一样內容常常用不一样兼容方法,即 分层。

优选CSS

  1. 网页页面载入后 js 常常必须延时最少 70ms 才可以获得正确的 webview 宽高
  2. css 常常最开始实行,且 cssom 的分析常常和 dom 在最初并行处理搭建
  3. js 会等候 dom 和 cssom 解决完后才可以实行,而 css 只需等候 dom
  4. 相比 js 在切换横纵屏时要切换 2 次过程来重绘,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. 对 器皿 内 元素 运用 css 动漫会导致经常重排和重绘,致使卡顿。
  2. 将和 兼容区 规格同样的 器皿 提高为生成层时所占运行内存过大,有是多少层运行内存就翻是多少倍。

为这些完成计划方案提高特性就要对于 器皿 动漫,并减小 器皿 的规格,最好是是和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 完成示例

  1. background-size 值为 contain 时对应 contain 兼容。
  2. background-size 值为 cover 时对应 cover 兼容。
  3. background-size 值为 100% 100% 时对应 `fill 兼容。
  4. 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> 完成示例

  1. preserveAspectRatiomeetOrSlicemeet 时对应 contain 兼容。
  2. preserveAspectRatiomeetOrSliceslice 时对应 cover 兼容。
  3. preserveAspectRatio 值为 none 时对应 fill 兼容。
  4. 这里 preserveAspectRatiomeetOrSlice 相对性的是器皿,并不是 兼容区 这里用 transform 来精准定位,而 preserveAspectRatiomeetOrSlice 固定不动为 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 等专用工具来輔助简化。
设计方案稿宽 vg 1般是网页页面级变量定义。
只需载入设计方案稿里每一个 元素 的横座标 x 、纵座标 y 、宽 w 和 高 h,随后专用工具转化成 css 便可。
这下妈妈不再用担忧我复原难题、显示屏兼容难题了。

文本解决

文本固定不动或单行不固定不动,svgtext 标识能够解决

文本固定不动或单行不固定不动还能够将文本变为照片

文本多行不固定不动,能够依靠 svgforeignObject 嵌入一般 div

计划方案比照

显示屏兼容计划方案十分多,选哪样方法完成 整层兼容 或 精简兼容,下面是比照

计划方案 放缩 精准定位 文本放缩 适配 padding-top 百分比 只能依宽 ✓ ✗ ✓ viewport ✓ ✗ ✓ 适用状况繁杂 object-fit ✓ ✓ ✗ 挪动端 android 4.4.4+ svg preserveRatio ✓ ✓ ✓ 挪动端 android 3.0+ (max/min)-(width/height) ✓ ✓ 固定不动文本 ✓ background-size ✓ ✓ 文本转照片 ✓

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。