Two kinds of mobile REM layout implementation methods

It is understood that there are two types of REM layout control, one of which is through the CSS media query, the other is through the introduction of JS to control, both methods have their own advantages, but I still like to use the introduction of JS method to achieve the REM layout, Although most of the current market is implemented using CSS media queries, here I will summarize these two methods:

Method One: Common methods, CSS media query

@media only screens and (max-width:600px), only screen and (max-device-width:400px) {  html,body {    font-size:50px;  }} @media only screens and (max-width:500px), only screen and (max-device-width:400px) {  html,body {    font-size:40px;  }} @media only screens and (max-width:400px), only screen and (max-device-width:300px) {  html,body {    font-size:30px;  }}. box{  Border:1rem solid #000;  Font-size:1rem;}

For this method, he only through the CSS file can be implemented, in the process of loading the page, the requested file is less, but if the use of the two mobile device screen width is not small, in the media query set the same interval, then the text size in the page will not change, However, the use of the introduction of JS method is not the same.

Method Two: Introduce JS

Requirements: According to the proportion of the design chart to dynamically set the corresponding Font-size value of the different screen//This section JS do not add the entry function, and reference when put to the front//UI size according to their own needs to change//design diagram of the width of the var UI = 750;// Set the font value yourself var font = 40;//Get the proportional value var ratio = Ui/font;var ohtml = Document.documentelement;var ScreenWidth = Ohtml.offsetwid Th;//is initially called once GetSize (), Window.addeventlistener (' resize ', getsize);//Resize value function fontsize () when GetSize is set dynamically () {  screenwidth = ohtml.offsetwidth;  If between restricted zones  (ScreenWidth <=) {    screenwidth =;  } else if (ScreenWidth >= UI) {    screenwidth = UI;  }  OHtml.style.fontSize = screenwidth/ratio + ' px ';}

The introduction of JS method, in the face of different sizes of mobile devices, can achieve the size of text sizes and other small changes.