Mobile Terminal rem layout and terminal rem Layout

Mobile Terminal rem layout and terminal rem Layout

It is understood that there are now two types of rem layout style control, one is through css media queries, and the other is through the introduction of js to control, these two methods have their own differences, but I still like to use the js method to implement rem layout. Although most of them are currently using css media queries, here I will summarize the two methods:

Method 1: Common method: css media Query

 1 @media only screen and (max-width: 600px), only screen and (max-device-width:400px) { 2   html,body { 3     font-size:50px; 4   } 5 } 6 @media only screen and (max-width: 500px), only screen and (max-device-width:400px) { 7   html,body { 8     font-size:40px; 9   }10 }11 @media only screen and (max-width: 400px), only screen and (max-device-width:300px) {12   html,body {13     font-size:30px;14   }15 }16 .box{17   border: 1rem solid #000;18   font-size: 1rem;19 }

This method can only be implemented through css files. During page loading, the number of requested files is small, but if the screen width of the two mobile devices is not much different, the text size on the page will not change if they are all set in the same interval of the media query, but the method for Introducing JavaScript is different.

Method 2: Introduce js

1 // requirement: dynamically set the font-size value under different screens according to the proportion of the design drawing. 2 // do not add entry functions for this section of JS, in addition, the ui size should be set to the top 3 at the time of reference. The ui size should be changed to 4 5 as needed. // The width of the design drawing should be 6 var ui = 750; 7 // set the font value 8 var font = 40; 9 // get the ratio value 10 var ratio = ui/font; 11 var oHtml = document.doc umentElement; 12 var screenWidth = oHtml. offsetWidth; 13 // call 14 getSize (); 15 16 window at the initial time. addEventListener ('resize', getSize); 17 // when resize is set dynamically, The fontsize value is 18 function getSize () {19 screenWidth = oHtml. offsetWidth; 20 // restriction interval 21 if (screenWidth <= 320) {22 screenWidth = 320; 23} else if (screenWidth> = ui) {24 screenWidth = ui; 25} 26 oHtml. style. fontSize = screenWidth/ratio + 'px '; 27}

By introducing js, mobile devices of different sizes can achieve minor changes in text sizes and other sizes.