CSSパーセンテージとピクセル

Question

私は自分自身を深刻なCSSの魅力的なもの（私もPHPのハックで、JavaScriptにはかなり似ている）と思っていますが、今日は特定の状況についてデザイナーとチャットしていました。ちょうどその答えを知らなかった。私は誰かがこの問題を詳しく説明できることを望んでいた。

シナリオ：

私は多くの人が「ああ、私はので、応答性の設計のすべてのための比率を使用する」、言うのを聞くが、その後、あなたが行くと自分のCSSを見て、彼らはあらゆる場所にピクセルを使用しています余白、パディングなど。

私の問題は、ピクセルをまったく使用しなければならないということですか？私はこのことを理解する上での主な苦労点は、高解像度の画面になることです。

例えば、コンテナーの高さを背景画像とテキストで700pxの高さに設定し、その幅を100％に設定したかなりシンプルな「ヒーロー」を作成していました。私の画面では、私はそれを作成していた、それは私の画面（意図だった）の完全な高さを表示しましたが、誰かに高解像度のラップトップ画面でそれを表示させると、画像の高さはかなり短く、スクリーンの高さ全体を満たしていない。

私は、高解像度の画面でピクセル値がどのように影響を受けるのか、いつもパーセンテージを使用するべきかを正確に説明する人物を探しています。

たとえば、コンテナを「通常の」解像度の画面で300pxの幅に設定した場合、高解像度の画面では同じコンテナの幅が150pxになり、ひどくひどく見えますか？

私がマージンやパディングのようにパーセンテージを使い始めると、CSSがどのように計算するのか不思議です。例えば、私はお互いの上に積み重ね、多くの入力でのお問い合わせフォームを持っている、と私は、次のような何かを言う：

input { 
    margin-bottom: 2.5%; 
} 

CSSからその2.5％を計算することになる

？それはそれの高さのマージン下2.5％が、私はそれはのオフに基づいてされるものとしてだけで混乱しています？親のmake」、と言うん。

任意の入力は大歓迎です。ありがとうございます。

Answer 1

マージンとパディングの％の値は、常に親の幅の％です。

だからあなたが広い1000pxある別の<div>内、margin-bottom: 25%;と<div>を持っていると言う、そして<div>の下マージンを1000 * 25％= 250ピクセルです。

.container { 
 
    width: 100px; 
 
    background: green; 
 
} 
 

 
.child25, 
 
.child45, 
 
.child-none{ 
 
    background: yellow; 
 
} 
 

 
.child25 { 
 
    margin-bottom: 25%; 
 
} 
 

 
.child45 { 
 
    margin-bottom: 45%; 
 
}

<div class="container"> 
 
    <div class="child25">This one should have 25px margin bottom.</div> 
 
    <div class="child45">This one should have 45px margin bottom.</div> 
 
    <div class="child-none">This one has no margin</div> 
 
</div>

あなたのヒーローの問題については

、あなたが主人公の高さが、フルスクリーンの高さとビューポートの高さの100％を意味 height: 100vh;を、使用したい場合。

700px高要素は常には任意画面上の高700pxであろう。実際に知覚されるサイズの違いは、画面のppi（ピクセル/インチ）、またはdpi（ドット/インチ）が通常モバイルデバイスで呼び出されるためです。値は、その画面上の実際の各インチを満たすピクセル/ドットの数を表します。

Answer 2

ファーストすべての、私は本当に良い割合のプロパティについて説明SOに与えられた答えを参照したい：？https://stackoverflow.com/a/31032477/4459695

だから私はピクセルを使用する必要があり
ピクセルを使用して実際にいくつかのために、最新のWebデザインでは避けるべきです単純な理由：

1. ピクセルは固定です。異なる画面サイズやビューポート、スケーリング、レイアウトには適応しません。最初のモバイルはgotoパターンであり、応答可能なWeb Designは適応可能なユニットに依存しており、ピクセルは避けることができるため、避けてください。
2. 高解像度の画面がますます主流になりつつあり、（大画面の場合）さらに多くのメディアクエリに対応したくない場合は、ピクセルを使用しないでください。
3. より優れた動的選択肢があります。これらは、vw,vh,em,remおよびもちろん%を含む。

しかし、どのユニットを使用するのですか？
emとremは、フォントサイズなどには本当に良いです。それらは容易に拡大縮小され、コンテンツのサイズに応じてマージンやパディングにも使用できます。

%は、マージン、パディング、フォントサイズではなく、マージンやパディングは問題ありませんが、相対オブジェクトの配置に最も適しています。これは、width、heightなどと組み合わせるとパーセンテージが最も効果的だということです（たとえば、フレックスレイアウトではうまくいきます）。

vwとvhは、すべての人が対象です - 私は個人的には特別な場合は個人的に使用しませんが、時には便利です。最も良い例は、完全なビューポートを満たすオーバーレイです。

これらのユニットはすべて動的であり、ビューポートに依存します。柔軟なスタイリングが可能になるので、これは素晴らしいことです。ピクセルはありません。