現在、携帯電話にはさまざまな種類があり、iPhone シリーズはもちろん、Android 携帯電話にも無数の種類があるため、すべての携帯電話に一連のレイアウト スタイルを記述することは不可能です。これは、フロントエンドでは不可能です。もちろん、合理的な解決策を見つけるために、ますます卓越性を追求するよう努めています。 rem はアダプティブ レイアウトに使用されます。
適応により得られる効果は以下の通りです（簡単なデモ）
2 つの div は、大画面か小画面かに関係なく、画面の半分を占めます。
上記の単純なパーセンテージの使用は実現できますが、パーセンテージではフォントの適応を実現できず、パーセンテージを対応するサイズに変換することは依然として困難です。次に、今回の主人公レムについて話しましょう（通常は横幅のみに適応します）
レム原理解析まず、rem はルート要素の fontSize サイズに対する相対単位です。つまり、1rem は html の fontSize サイズと同じです。次に、html 要素の fontSize を変更するだけで済みます。レムの大きさ。次に、異なる画面にどのように適応するかというと、画面の幅が大きくなるほど、1rem で表される px の値も大きくなり、HTML の fontSize の値も大きくなるようにする必要があります。画面の幅に合わせて。
いくつかの概念について話しましょう:デバイスのピクセル比、デバイスの物理ピクセル、デバイスに依存しないピクセル(仮想ピクセルとも呼ばれます)
デバイスのピクセル比 = デバイスの物理ピクセル/デバイスに依存しないピクセル
デバイスの物理ピクセル: デバイスに表示される最小単位
デバイスに依存しないピクセル: ピクセル (CSS 寸法) を論理的に測定するために使用されるデバイスに依存しない単位。
iPhone6/7/8を例に挙げると、iPhone6/7/8の物理ピクセルはデバイスの実際のサイズである750であり、pxはデバイスの独立したピクセル単位であり、2倍です。画面、CSS サイズが 375 である場合、デバイスのピクセル比はデバイスの工場出荷時にすでに設定されています。では、どうすれば適応を達成できるのでしょうか?
これは最も人気のあるレムを使用します
レム実施計画まず、さまざまな画面上のデバイスの物理ピクセルに応じて、html 要素の fontSize で異なるピクセル サイズを設定する必要があります。
1. メディアからのお問い合わせ
html{font-size:16px;}@メディア画面と (min-width:240px) { html { font-size:9px }}@メディア画面と (min-width:320px) {html {font-size:12px; ;}}@media 画面と (min-width:375px) {html{font-size:14.0625px;}}@media screen と (min-width:XXX) を使用してデバイスのサイズを決定し、html の fontSize を設定します。
2. js は html の fontSize を設定します (NetEase ソリューション)
function setRem () { let htmlRem = document.documentElement.clientWidth document.documentElement.style.fontSize = htmlRem/7.5 + 'px' }setRem()上記のコードはデザイン案としてiPhone6に基づいており、結果は実際のピクセル1rem=100pxになります。iphone6のデバイスピクセル比は2であるため、ブラウザのプレビューでは1remは50pxになります。 1remとデバイス幅の関係は7.5倍なので、デバイス幅が1rem変化すると実際のサイズは変わりますが、画面上の比率は変わりません。 (市場に出回っているほとんどのソリューションはこの種のものです)
3. vw、vh を使用する
html{font-size: 10vw}vw と vh は、パーセンテージ レイアウトと同様に、視覚領域を幅と高さの 100 部分に分割する新しい相対単位です。このソリューションでは、js を記述する必要はありませんが、互換性は少し劣ります。
以下に vw と vh の互換性表を添付します。
各 rem はルート要素の fontSize に相対的なため、ルート要素の fontSize をデバイスの幅に比例して設定するだけです。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。