PX Unit HTML5 Responsive Scheme

Mobile-H5 responsive Solutions The most used in recent years is the REM solution. This requires that the font-size of the root element be computed to implement the response.

But this scheme also has a disadvantage, that is, font-size is not an integer when some fonts use REM units will cause the font display size problems, for the visual restore requirements of high-quality projects this is still a headache for the front-end development.

The solution to the front-end response is nothing more than a normal display under different devices, and here is a reactive approach that does not require REM. Using PX directly, this is based on the 750px design manuscript. How much px do you measure in the design, in the style

Write directly how many px. This is not very fast, and does not require REM conversion.

• Transform
• Transform-origin

This is actually the use of Transform scale scaled page size to implement the response style.

Core code:

1Let Screenmatch = () = {2Document.body.style.setProperty (' visibility ', ' hidden ')3Let page = document.getElementById ("page");4Let _scale = window.outerwidth/750;5             6Page.style.setProperty ("Transformorigin", "0 0");7Page.style.setProperty ("transform", "scale (" + _scale + ")");8             //compatible with iOS89Page.style.setProperty ("-webkit-transform-origin", "0 0");TenPage.style.setProperty ("-webkit-transfrom", "scale (" + _scale + ")"); OneSetTimeout (() = { A    -Page.style.setProperty ("Transformorigin", "0 0"); -Page.style.setProperty ("transform", "scale (" + _scale + ")"); the                 //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); -  +         } A Screenmatch (); atWindow.onresize = Screenmatch;

The above code in the ID page is the entire page element starts with the node, the first element under the body. Here body/html to set min-height:100%;height:100%;

In fact, we can also use PX units in small programs, but small programs use transform when there will be some font aliasing bug, finally changed the Zoom property is good, while using-webkit-zoom to do compatibility. The difference between the core code and the H5 is not quite the same.

Zoom Small.

PX Unit HTML5 Responsive Scheme