The most commonly used h5 responsive solution for mobile terminals in recent years is the rem solution. This requires calculating the font-size of the root element to achieve responsiveness.
But this solution also has a disadvantage, that is, when font-size is not an integer, some fonts use rem units, which will cause problems with the size of the font display. This is still a headache for front-end development for projects with high visual restoration requirements. One thing.
Solving the front-end responsiveness is nothing more than displaying it normally on different devices. Here we introduce a responsive solution that does not require the rem method. Use px directly. What we are talking about here is the design draft based on 750px. How many px did you measure in the design draft? In the style
Directly write how many px. Isn't this very fast and does not require rem conversion?
Here we actually use transform's scale to scale the page size to achieve responsiveness.
Core code:
let screenMatch = () => { document.body.style.setProperty('visibility', 'hidden') 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', 'visible ') }, 100); } screenMatch(); window.onresize = screenMatch;In the above code, the node with the id of page is the starting node of the entire page element and the first element under the body. Here body/html needs to set min-height:100%;height:100%;
In fact, we can also use px units in mini programs, but there will be some font jagged bugs when using transform in mini programs. Finally, we just changed the zoom attribute and used -webkit-zoom for compatibility. The core code is not much different from h5. The same thing is the zoom size.
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.