ブートストラップで適応型高さを実装する方法

ブートストラップについて詳しく知りたい場合は、次をクリックしてください: ブートストラップ チュートリアル

Boot のラスター レイアウトを使用している人は多いですが、高さを比例的に制御する方法がわかりません。この記事では、ブートストラップ フレームワークを使用してフロントエンド ページを構築するときに、要素の高さの適応型レイアウトを制御する方法を詳しく紹介します。

最初に、ページの先頭にある JS の一部を引用します。

js コード スニペットは次のとおりです:

var iScale = 1;
iScale = iScale / window.devicePixelRatio;  
document.write(&#39;<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=&#39; + iScale + &#39;,minimum-scale=&#39; + iScale + &#39;,maximum-scale=&#39; + iScale + &#39;">&#39;) 
var iWidth = document.documentElement.clientWidth;
document.getElementsByTagName(&#39;html&#39;)[0].style.fontSize = iWidth / 16 + &#39;px&#39;;

注: これは次のとおりです。ドキュメントがロードされる前に導入されると、有効になりません。

導入が成功すると、ドキュメントの HTML 要素に font-size 属性が表示されることがわかります。

2つ目は、lessでCSSを書く必要があることですが、主な理由はlessには計算機能があるためです、lessの使い方についてはlessの公式サイトをご覧ください。

計算スタイルのないコード セグメント:

@s:46.875rem;
@color:~"div[class^='col']";
@{color}{
    background: #999;
    height: 200/@s;
  }

上記のコードは、.color クラスが高さ 100 ピクセルで追加され、計算されることを意味します。もちろん、200 ピクセルは直接 200 /@s; 以上です。変数の値は固定ではなく、動的に計算されるフォント サイズであり、値のサイズは実際の設計図のサイズに基づいて計算されます。

以上がブートストラップで適応型高さを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。