PX Unit HTML5 Response Scheme detailed

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. In this paper, we introduce the PX unit HTML5 response to the relevant information, I hope to help everyone.

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.

1. Transform

2. Transform-origin

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

Core code:

Let Screenmatch = () + = {document.body.style.setProperty (' visibility ', ' hidden ') let page = Docu            Ment.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; 

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 core code is not the same as the difference between the H5 and the smaller scaling.

Related recommendations:

HTML5 Responsive Banner-making tutorial

Detailed introduction to the HTML5 responsive design implementation of the nine Gongge sample code (figure)

Top Ten HTML5 response frame _html/css_web-itnose