Detailed explanation of the px Unit html5 response scheme and the pxhtml5 response

Detailed explanation of the px Unit html5 response scheme and the pxhtml5 response

The most widely used mobile h5 responsive solutions in recent years are the rem solutions. This requires calculation of the font-size of the root element to implement the response.

However, this solution also has a disadvantage, that is, when the font-size is not an integer, Some fonts use rem units, which may cause a problem in the font display size, for projects with high requirements for visual restoration, this is still a headache for front-end development.

The front-end response method can be displayed normally under different devices. Here we describe a responsive solution that does not require rem. Directly use px. Here we talk about the design draft based on 750px. In the design draft, how much px do you need?

The number of pixels directly written. This is not fast, nor requires rem conversion.

1. Transform
2. Transform-origin

In fact, the scale of the page size of transform is used to achieve the response.

Core code:
 

Let screenMatch = () => {document. body. style. setProperty ('visibility ', 'den den') let page = document. getElementById ("page"); let _ scale = window. outerWidth/750; page. style. setProperty ("transformOrigin", "0 0"); page. style. setProperty ("transform", "scale (" + _ scale + ")"); // compatible with ios8 page. style. setProperty ("-webkit-transform-origin", "0 0"); page. style. setProperty ("-webkit-transfrom", "scale (" + _ scale + ")"); setTimeout () => {page. style. setProperty ("transformOrigin", "0 0"); page. style. setProperty ("transform", "scale (" + _ scale + ")"); // compatible with ios8 page. style. setProperty ("-webkit-transform-origin", "0 0"); page. style. setProperty ("-webkit-transfrom", "scale (" + _ scale + ")"); document. body. style. setProperty ('visibility ', 'visable')}, 100);} screenMatch (); window. onresize = screenMatch;

In the above Code, the page id is the first element starting with the entire page element and under the body. Here, set the body/html to min-height: 100%; height: 100%;

In fact, we can also use the px Unit in a small program, but when using the transform in a small program, there will be some font sawtooth bugs, and finally we can change the zoom attribute, use-webkit-zoom for compatibility. The size of the core code is not much different from that of h5.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.