The design is great, this time it is really based on 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 adaptationScreen adaptation should refer to the adaptation relationship between the content adaptation area and the screen interval.
Single-screen adaptation includes contain, cover, or fill, and multi-screen adaptation is usually based on width.
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.
Preferred CSSFor performance issues such as screen adaptation, if it can be implemented with css, it should be implemented with css.
Whole layer adaptationIn order to ensure that the elements of each layer are scaled synchronously 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:
<!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> <!-- container--> <rect x=0 y=0 width=1080 height=1920 fill=rgba(96,96,96,.08)/> <!-- element--></svg><!-- contain center--><svg class=layer viewBox=0 0 1080 1920 preserveAspectRatio=xMidYMid meet> <!-- container--> <rect x=0 y=233 width=1080 height=1407 fill=#1565C0/> <!-- element--></svg><!-- contain bottom--><svg class=layer viewBox=0 0 1080 1920 preserveAspectRatio=xMidYMax meet> <!- - Container--> <rect x=444 y=1779 width=191 height=39 fill=#1565C0/> <!-- Element--></svg></body></html>Actual effect:
The whole layer adaptation is simple to implement, and the design draft values are directly read during development, which 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 <img> <object> <svg> as containers, and use background images as elements.
There are performance flaws when applying CSS animations:
To improve the performance of these implementations, 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 achieve streamlined adaptation.
Simplified adaptation formulaFor the derivation process, see H5 layered screen adaptation formula derivation.
The width of the design draft is v and the height is g. The horizontal coordinate of the element before adaptation is x. The vertical coordinate is y. The width is w. The height is h. After adaptation, the horizontal coordinate of the container is x3 = m*u + (x - m*v)/w*w1 = m*v/w*w3 + (x - m*v)/w*w1 ordinate y4 = n*f + (y - n*g)/h*h1 = n*g/h*h3 + (y - n*g)/h*h1 width w3 = (w/v)*u height h3 = (h/g)*f when contain When adapting the method, the scaling value s = Math.min(f/g, u/v) The horizontal left white space accounts for the total white space o = (m*v - x)/w The vertical white space accounts for the total white space p = ( n*g- y)/h When the cover mode is adapted, the scaling value s = Math.max(f/g, u/v) The horizontal left excess accounts for the total excess o = (x - m*v)/w The vertical excess accounts for the total excess p = (y - n*g)/h When the adaptation area is vertically at the top, m = 0. When it is vertically centered, m = .5. When it is vertically at the bottom, m = 1. When it is horizontally at the left, n = 0. When it is horizontally centered, n = .5. When horizontally on the right, n = 1 compared to the whole layer adaptation memory optimization (w3*h3)/(v1*g1) >= w*h/(v*g)<img> implementation example
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 and min-height is set to h/g, it corresponds to cover adaptation.
When width is w/v and height is h/g, it means fill adaptation.
During contain adaptation, 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.
During cover 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, it corresponds to m*u and n*f
Because the percentage in transform is relative to the width w1 and height h1 of the adapted element, it corresponds to (m*v + x)/w*w1 and (n*f + y)/h*h1
<!doctype html><html><body><style>img { /* min-width and min-height constitute a virtual container*/ min-width: 50.37037037037037%; /* w3 = (w/v)*u where w = 544, v = 1080 */ min-height: 7.395833333333333%; /* h3 = (h/g)*f where 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 where m = .5*/ top: 50%; /* n*f where n = .5 */ transform: translateX(-48.34558823529412%) /* (x - m*v)/w*w1 where x = 277, m = .5, v = 1080, w = 544 */ translateY(378.8732394366197%); /* (y - n*g)/h*h1 where y = 1498, n = .5, g = 1920, h = 142 */}</style><img src=http:/ /ui.qzone.com/544x142/> <!-- Element --></body></html> background implementation examplebackground-size value is contain it corresponds to contain adaptation.background-size value is cover it corresponds to cover adaptation.background-size value is 100% 100% corresponds to `fill adaptation.background-position percentage has the same p as o <!doctype html><html><body><style>div { position: absolute; width: 50.37037037037037%; /* w3 = w/v*u where w = 544, v = 1080 */ height: 7.395833333333333%; / * h3 = h/g*f where h = 142, g = 1920 */ background: url(http://ui.qzone.com/544x142) no-repeat; /* Background image as element*/ background-size: cover; left: 25.64814814814815%; /* x3 = x/v* u where x = 277, v = 1080 */ top: 78.02083333333333%; /* y3 = y/g*f where y = 1498, g = 1920 */ background-position-x: -48.34558823529412%; /* o = (x - m*v)/w where m = .5 , v = 1080, x = 277, w = 544*/ background-position-y: 378.8732394366197%; /* p = (y - n*g)/h where n = .5, g = 1920, y = 1498, h = 142*/}</style>< div></div> <!-- Container--></body></html><svg> implementation example
meetOrSlice of preserveAspectRatio is meet it corresponds to contain adaptation.meetOrSlice of preserveAspectRatio is slice it corresponds to cover adaptation.preserveAspectRatio value is none , it corresponds to fill adaptation.meetOrSlice of preserveAspectRatio here is relative to the container, not the adaptation area. transform is used to position it, and meetOrSlice of preserveAspectRatio is fixed to 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 where m = .5, v = 1080, w = 544 */ translateY (676.056338028169%); /* n*g/h*h3 where n = .5, g = 1920, h = 142 */ overflow: visible;}svg image { transform: translateX(-48.34558823529412%) /* (x - m*v)/w*w1 where x = 277, m = .5, v = 1080 , w = 544 */ translateY(378.8732394366197%); /* (y - n*g)/h*h1 where y = 1498, n = .5, g = 1920, h = 142 */}</style><svg viewBox=0 0 544 142 preserveAspectRatio=xMinYMin meet> <!-- Container--> <image width=544 height=142 xlink:href=http://ui.qzone.com/544x142/> <!-- Element --></svg></body></html> Auxiliary toolsIt is troublesome to manually calculate percentages and write css. You can use tools such as sass to help simplify it.
The width v and height g of the design draft are generally page-level constants.
Just read the abscissa x , ordinate y , width w and height h of each element in the design draft, and then the tool generates css.
Now my mother no longer has to worry about my restoration issues or screen adaptation issues.
word processing Text is fixed or single line is not fixed, svg text tag can handle it
If the text is fixed or a single line is not fixed, you can also convert the text into pictures.
Multiple lines of text are not fixed. You can use svg ’s foreignObject to embed ordinary div
Plan comparison
There are many screen adaptation solutions. Which method should you choose to achieve full-layer adaptation or streamlined adaptation? The following is a comparison.
| plan | Zoom | position | text zoom | compatible |
|---|---|---|---|---|
| padding-top percentage | Can only be lenient | ✓ | ✗ | ✓ |
| viewport | ✓ | ✗ | ✓ | Support is complicated |
| object-fit | ✓ | ✓ | ✗ | Mobile Android 4.4.4+ |
| svg preserveRatio | ✓ | ✓ | ✓ | Mobile Android 3.0+ |
| (max/min)-(width/height) | ✓ | ✓ | fixed text | ✓ |
| background-size | ✓ | ✓ | Text to picture | ✓ |
The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.