rem (ルート要素のフォント サイズ) は、ルート要素 (つまり、html 要素) に対する相対的なフォント サイズの単位を指します。
たとえば、ルート要素のフォント サイズが 10px であるとすると、5rem のサイズは 5*10=50px となります。
html{ font-size: 10px;}p{ width: 2rem; /* 2*10 = 20px;*/ margin: 1rem;}適応のためのレム以前は、このページをよく使用していました。ビューポートの幅をデバイス幅に設定し、互換性が必要なデバイスの最小幅 (通常は 320px) を選択しました。この最小幅に基づいてページを作成します。単位はピクセルとパーセンテージを使用します。幅が異なるデバイスでも、ページのフォント サイズとコンテンツ サイズは同じです。違いは、大きい画面のコンテンツ間のギャップが小さい画面のコンテンツのギャップよりも大きいことです。したがって、この欠点は、特定のサイズのデバイスではページがうまく表示されないことです。
rem を使用してページを作成する場合、さまざまなデバイスの幅に応じて、ルート要素にさまざまなフォント サイズを設定します。幅が広いほど、フォントサイズは大きくなります。次に、rem を使用して元の px を置き換えます。このように、画面幅が大きくなるにつれて、フォント サイズ、コンテンツ サイズ、ペアも大きくなります。
まず、jsはhtmlのデフォルトのフォントサイズを設定します（htmlの先頭に書かれています）
<script type=text/javascript> var bodyElement = document.documentElement || document.body, RC = { w: 750, h: 1206 }, //デフォルトのデザインドラフトの幅と高さ GC = { w: document.documentElement.clientWidth || ウィンドウ.インナー幅、h: ドキュメント要素.クライアントの高さ || screen.height }; function setFontSize(){ var rightSize = parseFloat((RC.w / RC.h).toFixed(1)), currentSize = parseFloat((GC.w / GC.h).toFixed(1)) , lastHTMLSize = 16, // デフォルトの 16 は、html のデフォルトのフォント サイズが 16px であるためです。 html = document.getElementsByTagName(html)[0]; if(rightSize > currentSize){ // ロングスクリーン lastHTMLSize = 16; }else if(rightSize < currentSize){ // ワイドスクリーン lastHTMLSize = (RC.h / GC.h * GC .w) / RC.w * 16; } html.style.fontSize = GC.w / lastHTMLSize + 'px'; setFontSize();</script>scss ファイルの px を rem に設定します
// デフォルトの 16 は HTML のデフォルトのフォント サイズです // デフォルトの 750 はデザイン ドラフトのデフォルトの幅です // $n はデザイン ドラフトから測定された距離 @charset UTF-8; { @return $n / (750 / 16)+rem;}簡単に呼び出せるように関数を編集します。
@function getTop($n) { @return ($n - 1206 / 2) / (750 / 16)+rem;} @function getLeft($n) { @return ($n - 750 / 2) / (750 / 16)+rem;}@function getRight($n) { @return (($n - 750) / 2) / (750 / 16)+rem;}@mixin center($left, $top) { //位置を変更: 絶対; 左: 50%; 上: rem($top); 0 0 0 getLeft($left); mixin centerlt($left, $top) { //上下左右の中央位置: 左: 50%; 上: 50%; getTop($top) 0 0 getLeft($left);}@mixin centerrt($right, $top) { //上下左右の中央位置: 絶対; 右: 50%; マージン: getTop($top) ($right) 0 0;}@mixin middlert($right, $top) { //上、下、中央、右の位置を変更します: 絶対右: rem($right); マージン: getTop( $トップ) 0 0 0;}@mixin centerb($left, $bottom) { //位置を変更します: 左: 50%; 下: rem($bottom); }@mixin leftTop($left, $top) { //左を上に変更: 絶対; left: rem($left); 上: rem($top);}@mixin rightTop($right, $top) { //右を位置: 絶対に変更; right: rem($right); トップ: rem($top);}@mixin leftBottom($left, $bottom) { //右を位置: 絶対に変更;左: rem($left); 下: rem($bottom);}上記の関数を呼び出します (実際の距離を測定するには、幅と高さの距離を ps 単位で測定できます。デフォルトのデザイン ドラフト幅は 750 です)。
.page1-img1{ 幅: rem(473); 高さ: rem(173);}以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。