適応設計でREMユニットを調整して、高さの問題を解決する方法は？

適応設計：高さ調整の問題を巧みに解決します

レスポンシブデザインでは、ページ要素の高さを正確に制御することは、多くの場合頭痛です。特に、ブラウザの上部にあるツールバーがスペースを占有し、実際の目に見える高さがデザインドラフトの高さよりも小さくなる場合、ページ要素の高さがデザインドラフトと一致するようにする方法が開発者にとって大きな課題になります。

デザインドラフトサイズは1920x1080ピクセルであると仮定しますが、ブラウザツールバーの存在により、実際の視覚的な高さが1080ピクセル未満になると仮定します。 REMユニットを直接使用し、デザインドラフトの幅に応じてbodyのfont-sizeを設定すると、ページレイアウトがバイアスされる可能性があります。

幅の適応に基づいてREMスキームを試した可能性があります。

 const selfadapter =（）=> {をエクスポート
  DesignWidth = 1920とします。 //ドラフト幅を設計html = document.documentlement;
  ww = html.clientwidthを// window width let rem =（ww * 100） / designwidth;
  html.style.fontsize = rem "px";

  constsize =（）=> {
    rem =（ww * 100） / designwidth;
    html.style.fontsize = rem "px";
  };

  window.addeventlistener（ "resize"、resize、false）;
};

このスキームは、高さの変化を無視して、ウィンドウの幅に基づいてREM値を計算します。ブラウザツールバーによって引き起こされる高さの違いに対処するために、より効果的な戦略は、ウィンドウの視覚高さに基づいてREM値を計算することです。

変更されたコードは次のとおりです。

 const selfadapter =（）=> {をエクスポート
  DesignHeight = 1080としましょう。 //ドラフトの高さを設計let html = document.documentlement;
  wh = html.clientheight; // window height let rem =（wh * 100） / designheight;
  html.style.fontsize = rem "px";

  constsize =（）=> {
    rem =（wh * 100） / designheight;
    html.style.fontsize = rem "px";
  };

  window.addeventlistener（ "resize"、resize、false）;
};

clientHeightを使用してウィンドウの視覚的な高さを取得し、デザインドラフトの高さに基づいてREM値を計算することにより、ブラウザツールバーによって引き起こされるページの高さの偏差を効果的に解決し、ページ要素の高さがデザインドラフトと一致し、UIの不整合を回避できます。これにより、デザインドラフトの100pxをブラウザで1レムに正確に変換できます。

以上が適応設計でREMユニットを調整して、高さの問題を解決する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。