兩種行動端rem佈局實作方法

據了解，現在有兩種rem佈局的樣式控制，其中一種是透過css的媒體查詢，另一種是透過引入js來控制，這兩種方法各有各的優點，但是我還是喜歡用引入js的方法來實現rem佈局，儘管現在市面上大多數都在使用css媒體查詢的方式實現，在此我就將這兩種方法做一總結：

方法一：常用方法，css媒體查詢

@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;
}

對於這種方法而言，他僅僅通過css文件就可以實現，在加載頁面的過程中，請求的文件較少，但是如果使用的兩個移動端設備螢幕寬度相差不大，都在媒體查詢所設定的同一區間，那麼頁面中的文字大小等不會變化，可是使用引入js的方法就不一樣了。

方法二：引入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 = ui){
    screenWidth = ui;
  }
  oHtml.style.fontSize = screenWidth/ratio + 'px';
}

這種透過引入js的方法，面對不同尺寸的行動裝置，都能實現文字大小等尺寸的細微變化。

相關建議：

行動裝置頁面開發適配 rem佈局原理

手機頁面rem佈局_html/css_WEB-ITnose

JavaScript中rem佈局在react中的應用_javascript技巧

#

以上是兩種行動端rem佈局實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！