そのため、レスポンシブレイアウトを開発する際にどのユニットを採用するかは本当に迷っています。 viewport units
を使用すると言う人もいます。他の人は、rem
を使用すると言います。他には、メディアクエリとピクセル比を使用すると言います。それでは、経験と最も防弾の観点から言えば、どのユニットが「正しい」ユニットなのでしょうか?
モバイル向けに最適化するには、メタタグでビューポートを構成する必要があります。
これは私が使用するものです:
<meta name="viewport" content="width=device-width,initial-scale=1">
そうすれば、モバイルの場合でもCSSでピクセル単位を指定すると、ピクセル単位がCSS単位と一致します。
最大の互換性のために最も頻繁に使用するユニットは次のとおりです。
px-生のピクセル単位。デスクトップでは、1つの小さなドットのサイズで、画面の幅の約1 /(画面の幅)と画面の高さの1 /(画面の高さ)が必要です。
em-電子測定の略です。フォントサイズに関連します。要素をスケーリングするために頻繁に使用します。ここに詳細情報があります: http://www.w3.org/WAI/GL/css2em.htm
その後、時々パーセント単位を使用します。つまり、画面の割合です。
特別な広告のためにスペースのブロックを予約する場合など、必要な場合にのみピクセル単位を使用することをお勧めします。
私は新しいユニットを気にしません。なぜなら、1つだけではなく、すべてのブラウザーとの互換性を維持したいからです。
レスポンシブデザインcssのほとんどを注意深く観察すると、%が幅、高さ、マージンなどの主要な単位として見つかります。font-sizeの場合、emは広く受け入れられています。さらに、メディアクエリも重要です。