This time I will bring you S5 to adapt to layered screens. What are the precautions for S5 to adapt to layered screens? The following is a practical case, let’s take a look.
The design is great, this time it is really "according to the design draft", because now, any machine is a standard machine according to the design draft! Developer classmates, now you can just read the design draft annotations directly!Screen adaptation
Screen adaptation should refer to the adaptation relationship between the content adaptation area and the screen area. Single-screen adaptation includes contain, cover or fill, and multi-screen adaptation is common with yikuan. contain and cover also need positioning to handle white space and excess content. Different content in the same H5 often uses different adaptation methods, that is, layering.
- js is often required after the page is loaded A delay of at least 70ms is required to obtain the correct webview width and height
- css is often executed first, and the parsing of cssom is often built in parallel with the dom at the beginning
- js will wait for dom and cssom to be processed before it can be executed, while css only needs to wait for dom
- Compared with js, when switching between horizontal and vertical screens, it has to switch 2 processes to redraw. No need to switch to css
- For performance issues such as screen adaptation, if it can be implemented with css, it should be implemented with css.
To ensure that the elements of each layer are scaled synchronously and without distortion, the adaptation area of each layer should be equal to the size of the design draft.
The direct implementation is to construct a container with the same size as the adaptation area and adapt the entire layer.
There can be several elements with the same adaptation method in the container.
Take
svg implementation as an example: <pre class="brush:php;toolbar:false">nbsp;html>
<style>
.layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<!-- fill -->
<svg> <!-- 容器 -->
<rect></rect> <!-- 元素 -->
</svg>
<!-- contain 居中 -->
<svg> <!-- 容器 -->
<rect></rect> <!-- 元素 -->
</svg>
<!-- contain 居底 -->
<svg> <!-- 容器 -->
<rect></rect> <!-- 元素 -->
</svg>
</pre>
Actual effect:
The entire layer adaptation is simple to implement, Directly reading the design draft values during development can meet the needs of most static pages.
But when there are many h5 animations, you have to consider the smoothness of the animation and the performance of the page.
Use replaceable elements such as

<object></object>
<svg></svg>
etc. as containers, and use background images to make Elements, There are performance defects when applying css animation:
- Applying css animation to elements in the container will cause frequent rearrangement and redrawing, resulting in lag.
- The memory occupied when promoting a container with the same size as the adaptation area to a composition layer is too large, and the memory will be doubled as many layers as there are.
- In order to improve the performance of these implementation solutions, we need to focus on container animation and reduce the size of the container. It is best to be equal to the minimum total area of all elements in a layer to make it streamlined and suitable. Equipped with
For the derivation process, see H5 Layering Derivation of screen adaptation formula
设计稿 宽 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)

When max-width is w/v and max-height is h/g, it corresponds to contain adaptation. When min-width is set to w/v,
min-height
is set to h/g, it corresponds to cover adaptation. When width is set to w/v and height is h/g, it means fill adaptation. contain When adapting, if the original size of the image is smaller than max-width and max-height, use zoom: 10 to enlarge or directly modify the original size of the image.
When covering adaptation, if the original size of the image is larger than min-width and min-height, use zoom: .1 to reduce or directly modify the original size of the image.
Because the percentage in top left is relative to the screen width u and height f, corresponding to m*u and n*f
Because the percentage in transform is relative to the width w1 and height h1 of the element after adaptation, it corresponds to (m*v + x)/w*w1 and (n*f + y)/h*h1
nbsp;html> <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(-48.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="/static/imghwm/default1.png" data-src="http://ui.qzone.com/544x142" class="lazy" alt="S5 allows layered screens to adapt" > <!-- 元素 -->
background Implementation example 这里 辅助工具 手动计算百分比及写 css 很麻烦,可以借助 sass 等工具来辅助简化。 文字处理 文字固定或单行不固定, 文字固定或单行不固定还可以将文字转为图片 文字多行不固定,可以借助 方案对比 屏幕适配方案非常多,选哪种方式实现 整层适配 或 精简适配,下面是对比 相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章! 推荐阅读:
<a href="http://www.php.cn/code/872.html" target="_blank">background-size</a>
值为 contain
时对应 contain 适配。background-size
值为 cover
时对应 cover 适配。background-size
值为 100% 100%
时对应 `fill 适配。<a href="http://www.php.cn/wiki/896.html" target="_blank">background-position</a>
百分比和 o
p
意义相同nbsp;html>
<style>
p {
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.64814814814815%; /* x3 = x/v*u 其中 x = 277, v = 1080 */
top: 78.02083333333333%; /* y3 = y/g*f 其中 y = 1498, g = 1920 */
background-position-x: -48.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>
<p></p> <!-- 容器 -->
preserveAspectRatio
的 meetOrSlice
为 meet
时对应 contain 适配。preserveAspectRatio
的 meetOrSlice
为 slice
时对应 cover 适配。preserveAspectRatio
值为 none
时对应 fill 适配。preserveAspectRatio
的 meetOrSlice
相对的是容器,不是 适配区 这里用 transform
来定位,而 preserveAspectRatio
的 meetOrSlice
固定为 xMinYMin
。nbsp;html>
<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(-48.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> <!-- 容器 -->
<image></image> <!-- 元素 -->
</svg>
设计稿宽 v
高 g
一般是页面级常量。
只需读取设计稿里每个 元素 的横坐标 x
、纵坐标 y
、宽 w
和 高 h
,然后工具生成 css 即可。
这下妈妈再也不用担心我还原问题、屏幕适配问题了。svg
的 text
标签可以处理svg
的 foreignObject
嵌入普通 p
方案
缩放
定位
文字缩放
兼容
padding-top 百分比
只能依宽
✓
✗
✓
viewport
✓
✗
✓
支持情况复杂
object-fit
✓
✓
✗
移动端 android 4.4.4+
svg preserveRatio
✓
✓
✓
移动端 android 3.0+
(max/min)-(width/height)
✓
✓
固定文字
✓
background-size
✓
✓
文字转图片
✓
The above is the detailed content of S5 allows layered screens to adapt. For more information, please follow other related articles on the PHP Chinese website!

H5 (HTML5) will improve web content and design through new elements and APIs. 1) H5 enhances semantic tagging and multimedia support. 2) It introduces Canvas and SVG, enriching web design. 3) H5 works by extending HTML functionality through new tags and APIs. 4) Basic usage includes creating graphics using it, and advanced usage involves WebStorageAPI. 5) Developers need to pay attention to browser compatibility and performance optimization.

H5 brings a number of new functions and capabilities, greatly improving the interactivity and development efficiency of web pages. 1. Semantic tags such as enhance SEO. 2. Multimedia support simplifies audio and video playback through and tags. 3. Canvas drawing provides dynamic graphics drawing tools. 4. Local storage simplifies data storage through localStorage and sessionStorage. 5. The geolocation API facilitates the development of location-based services.

HTML5 brings five key improvements: 1. Semantic tags improve code clarity and SEO effects; 2. Multimedia support simplifies video and audio embedding; 3. Form enhancement simplifies verification; 4. Offline and local storage improves user experience; 5. Canvas and graphics functions enhance the visualization of web pages.

The core features of HTML5 include semantic tags, multimedia support, offline storage and local storage, and form enhancement. 1. Semantic tags such as, etc. to improve code readability and SEO effect. 2. Simplify multimedia embedding with labels. 3. Offline storage and local storage such as ApplicationCache and LocalStorage support network-free operation and data storage. 4. Form enhancement introduces new input types and verification properties to simplify processing and verification.

H5 provides a variety of new features and functions, greatly enhancing the capabilities of front-end development. 1. Multimedia support: embed media through and elements, no plug-ins are required. 2. Canvas: Use elements to dynamically render 2D graphics and animations. 3. Local storage: implement persistent data storage through localStorage and sessionStorage to improve user experience.

H5 and HTML5 are different concepts: HTML5 is a version of HTML, containing new elements and APIs; H5 is a mobile application development framework based on HTML5. HTML5 parses and renders code through the browser, while H5 applications need to run containers and interact with native code through JavaScript.

Key elements of HTML5 include,,,,,, etc., which are used to build modern web pages. 1. Define the head content, 2. Used to navigate the link, 3. Represent the content of independent articles, 4. Organize the page content, 5. Display the sidebar content, 6. Define the footer, these elements enhance the structure and functionality of the web page.

There is no difference between HTML5 and H5, which is the abbreviation of HTML5. 1.HTML5 is the fifth version of HTML, which enhances the multimedia and interactive functions of web pages. 2.H5 is often used to refer to HTML5-based mobile web pages or applications, and is suitable for various mobile devices.


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment

DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

SublimeText3 English version
Recommended: Win version, supports code prompts!

MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.
