Two mobile terminal rem layout implementation methods

It is understood that there are two styles of rem layout control. One is through css media query, and the other is through the introduction of js. Both methods have their own advantages, but I still like it. Use the method of introducing js to implement rem layout. Although most of the current market is using css media query, I will summarize these two methods here:

Method 1 : Commonly used method, css media query

@media only screen and (max-width: 600px), only screen and (max-device-width:400px) {
  html,body {
    font-size:50px;
  }
}
@media only screen and (max-width: 500px), only screen and (max-device-width:400px) {
  html,body {
    font-size:40px;
  }
}
@media only screen 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, it can be implemented only through css files. During the process of loading the page, fewer files are requested, but if the two mobile The screen widths of the end devices are not much different, and they are all in the same range set by the media query, so the text size on the page will not change, but the method of introducing js is different.

Method 2: Introduce js

// 需求：根据设计图的比例去动态设置不同屏幕下面对应的font-size值
// 这段JS不要添加入口函数，并且引用的时候放到最前面
// ui的大小根据自己的需求去改
// 设计图的宽度
var ui = 750;
// 自己设定的font值
var font = 40;
// 得到比例值
var ratio = ui/font;
var oHtml = document.documentElement;
var screenWidth = oHtml.offsetWidth;
// 初始的时候调用一次
getSize();
window.addEventListener('resize', getSize);
// 在resize的时候动态设置fontsize值
function getSize(){
  screenWidth = oHtml.offsetWidth;
  // 限制区间
  if(screenWidth <= 320){
    screenWidth = 320;
  }else if(screenWidth >= ui){
    screenWidth = ui;
  }
  oHtml.style.fontSize = screenWidth/ratio + 'px';
}

This method of introducing js can achieve subtle changes in text size and other sizes when facing mobile devices of different sizes.

Related recommendations:

Mobile page development adaptation rem layout principle

Mobile page rem layout_html/css_WEB-ITnose

Application of rem layout in JavaScript in react_javascript skills

The above is the detailed content of Two mobile terminal rem layout implementation methods. For more information, please follow other related articles on the PHP Chinese website!