ブートストラップでpxをremに自動的に変換する方法

CSS3 での Rem 値と Px 間の変換:

bootstrap のデフォルト html{font-size: 10px;}

rem は、ルート要素 に相対的な相対サイズ値です。

たとえば、html のフォント サイズ値を html{font-size : に設定するとします。 87.5%;} (つまり 14px)。

関連する推奨事項: 「Bootstrap 入門チュートリアル 」

その他のフォントは、必要な値を 14 で割った値になります。

例: デフォルトの Twentytwelve テーマのサイズは 960px、レムに変換すると 960/14=68.57142857142857rem、

パディングの 24 ピクセルは 24/14=1.714285714285714rem などとなります。

上記の14は変数であり、ルート要素HTMLのフォントサイズの設定と比較して、62.5%に設定すると約数は10になります。比較表は右のとおりです。

この rem 単位を使用する利点はわかりませんが、ルート要素のフォント サイズとして 62.5% を選択した場合、px と rem の間の変換は、px を 10 で直接除算することになります。 em よりも優れた rem を取得する はるかに簡単ですが、em と px の間で変換する方法がまだわかりません。

なお、rem は ie8 以下以外のブラウザではサポートされていないため、ie8 以下を考慮したい場合は、twentytwelve のデフォルト ファイルのように、px を設定してから rem を設定することができます。

以上がブートストラップでpxをremに自動的に変換する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。