rem と em と px vh vw と % モバイル端末の長さunit_html/css_WEB-ITnose

1.rem と em、px

まず、em と px の関係について説明します。em はフォントの高さを指します。ブラウザのデフォルトは 1em=16px なので、0.75em=12px になります。ページ上でよく見かけますが、ルート要素は font-size: 65%; と記述しているため、ページに表示されるフォント サイズは 16px*62.5=10em となり、12px=1.2em、10px=1em になります。つまり、元のpx値を10で割って、単位をemに変更するだけです

emの特徴

emは相対値であり、親要素のサイズに応じて変化します

しかし、複数の要素が入れ子になっているときにサイズを計算するのは頭の痛い

この場合、rem が登場します

rem の違いは、それが基本要素に対して相対的であるということです。影響を受ける 親クラスが影響する

結論: フロントエンド業界が一般的にモバイル端末に対してデフォルトで rem または em を使用する理由は、ルート要素を js (または @media) を通じて制御してフォント サイズを実現できるためです。さまざまな解像度に適応する効果

1.vh、vw、および % vh vw は、ビューポートの高さとビューポートの幅を表し、ウィンドウ

を意味します

多くの場合、これらは重複しますが、それぞれに独自の利点があります要約すると、

幅を扱う場合は、% 単位の方が適切です。高さを扱う場合は、vh 単位の方が適しています。

(追記: たとえば、画面内にテキストを配置する必要がある場合、% を使用すると dom 全体の高さが計算され、vh は現在の画面の高さが計算されます)