PX Unit HTML5 Responsive Scheme

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.