Detailed explanation of px unit html5 responsive solution

The most commonly used mobile h5 responsive solution in recent years is the rem solution. This requires calculating the font-size of the root element to achieve responsiveness. This article mainly introduces you to the relevant information of the px unit HTML5 responsive solution, hoping to help you.

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 problem for projects with high visual restoration requirements. It is a headache for front-end development.

Solving the front-end responsiveness is nothing more than being able to display 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 do you measure in the design draft? Directly write the number of px in

in the style. Isn't this very fast and does not require rem conversion?

1. transform

2. transform-origin

This is actually the scale zoom page using transform 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 + ")");
            //兼容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 + ")");
                //兼容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 id 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 the mini program, but when using transform in the mini program, there will be some jagged fonts. bug, finally 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.

Related recommendations:

HTML5 responsive banner production tutorial

Detailed introduction to the sample code of Html5 responsive design to implement Jiugongge (Picture)

Top Ten HTML5 Responsive Framework_html/css_WEB-ITnose

The above is the detailed content of Detailed explanation of px unit html5 responsive solution. For more information, please follow other related articles on the PHP Chinese website!