ブートストラップで適応型高さを実装する方法-ブートストラップのチュートリアル-php.cn

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

angryTom

リリース： 2019-07-29 09:25:27

オリジナル

6752 人が閲覧しました

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

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

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^=&#39;col&#39;]";
@{color}{
    background: #999;
    height: 200/@s;
  }

ログイン後にコピー

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

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