Mobile-side page adaptation, REM layout

Mobile page Adaptation

EM calculates its own size based on the font size of the element itself.

REM Root EM calculates its own size based on the font size of the root node (HTML)

Adaptation: Each mobile device, the resolution size is inconsistent, so that our pages in various resolutions are displayed intact (equal to the scale);

Depending on the resolution of the screen

Dynamically set the font size of the HTML to achieve more than the zoom function of the page

Note: Ensure that the font size for the final HTML calculation cannot be less than 12

At the beginning of the first set up a section of JS code, to get the screen width, this JS precedence over any CSS and JS

<script>

(function () {

var html = document.queryselector ("html");

var width = html.getboundingclientrect (). width;

Html.style.fontSize = width/16 + "px";

WIDTH/16 html Font size = 16 of the screen width = 1rem

270/

Console.log (Html.getboundingclientrect ());

})();

</script>

Html.getboundingclientrect (). width; Get screen width

Pixel ratio

alert (window.devicepixelratio); Pixel ratio of 2 pixels to two pixels to display 1px of content

The width of the best design chart is maintained at 750 or more

Mobile-side page adaptation, REM layout