css - デバイス全体のピクセル サイズ

Question

CSS のフロントエンド定義の多くは、ピクセルを測定単位として使用します。複数のディスプレイ サイズ用に設計する場合、それはどのように関連する尺度ですか? ピクセルサイズはディスプレイ解像度の関数だと思います。実際のサイズ (たとえば、ミリメートルなど) を使用する方法はありますか? または、実際の画面解像度の大きなばらつきを考慮して、ピクセルを尺度として使用することはどのように理にかなっていますか?

Answer 1

フォント相対の長さ: '<a href="http://www.w3.org/TR/css3-values/#em-unit" rel="nofollow"> em '、'<a href="http: //www.w3.org/TR/css3-values/#ex-unit" rel="nofollow"> ex ', '<a href="http://www.w3.org/TR/css3-values/ #ch-unit" rel="nofollow"> ch ', '<a href="http://www.w3.org/TR/css3-values/#rem-unit" rel="nofollow"> rem ' 単位

ビューポートのパーセンテージの長さ: '<a href="http://www.w3.org/TR/css3-values/#vw-unit" rel="nofollow"> vw '、'<a href="http: //www.w3.org/TR/css3-values/#vh-unit" rel="nofollow"> vh ', '<a href="http://www.w3.org/TR/css3-values/ #vmin-unit" rel="nofollow"> vmin ', '<a href="http://www.w3.org/TR/css3-values/#vmax-unit" rel="nofollow"> vmax ' 単位

絶対長:「cm」、「mm​​」、「in」、「pt」、「pc」、「px」単位

_{これらの長さのすべてがブラウザー間で完全にサポートされているわけではないことに注意してください。http://caniuse.com/viewport-unitsを参照してください}

ソース: http://www.w3.org/TR/css3-values/

---

pxなどのビューポート タグ セットとともに、レスポンシブ デザインのメディア クエリでよく使用される絶対的な長さ<meta name="viewport" content="width=device-width">。これは、画面解像度をターゲットにするのに役立ちます。

ビューポートのパーセンテージ ベースの長さはおそらく最適な長さですが、すべてのブラウザーで完全にサポートされているわけではありません。したがって、それらは最良の選択肢ではない可能性があります。

Answer 2

W3C CSS ユニットを参照して、いくつかのタイプのユニットを使用できます。