モバイル端末のレムレイアウトの2つの実装方法

現在、rem レイアウト制御には 2 つのスタイルがあり、1 つは CSS メディア クエリによって制御され、もう 1 つは js を導入することで制御されます。どちらの方法にも独自の利点がありますが、私は依然として import js メソッドを使用するのが好きです。 rem レイアウトを実装するには、現在市場に出ているほとんどが CSS メディア クエリを使用していますが、ここではこれら 2 つの方法をまとめます:

方法 1: 一般的な方法、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 ファイルのみを使用すると、ページの読み込みプロセス中に要求されるファイルは少なくなりますが、使用される 2 つのモバイル デバイスの画面幅がそれほど変わらない場合、両方ともメディア クエリ内に含まれます。同じ範囲が設定されている場合、テキスト サイズは異なります。ページ上の内容は変わりませんが、jsの導入方法が異なります。

方法 2: 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';
}

この js を導入する方法では、さまざまなサイズのモバイル デバイスのテキスト サイズやその他のサイズを微妙に変更できます。

関連する推奨事項:

モバイル ページ開発の適応 rem レイアウトの原則

モバイル ページ rem レイアウト_html/css_WEB-ITnose

react_javascript スキルにおける JavaScript での rem レイアウトの適用

以上がモバイル端末のレムレイアウトの2つの実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。