私は長年にわたりCSSを使用してきましたが、私はいつも高さと幅をピクセルではなくパーセンテージを使って定義しています（たとえば、余白、パディングなど、ピクセルを使用する場合など）。他の上のいずれかを使用するいずれかの利点があります：CSS - パーセンテージまたはピクセル？
body{
height: 300px;
width: 250px;
margin-top: 10px;
}
私の質問はこれです：
body{
height: 99%;
width: 99%;
margin-top: 10px;
}
が、私はしばしばこのような例を参照してください。
私はこのような何かをするだろう全体的にと、もしそうなら、それらは何ですか？
ありがとうございます。
ミック
モバイルウェブページ。それのための％の岩です。それは（明らかに）適合するように適合します。
しかし、例えば、一定の方法で表示したいテキストの記事のような固定幅が必要な場合は、pxが勝者です。
両方を使用すると、オブジェクトが同じサイズになりたい場合は（ズームや画面サイズの影響を受けない）、次に何を、ピクセル関係ありませ相互:)
私はネットブックを持っています。固定幅は嫌です。ほとんどのウェブサイトにはどこかにあります。モバイルデザインをするのは大丈夫ですが、その間にスペースがあります。 –
最も確かに@Nicholas Wilsonしかし、それはすべて一つのものになります、サイトの目的は何ですか？そのデザインはどのようにすべきか、どのようにナビゲートすべきかウェブサイトの作成時に最初に検討する事項です。 –
に比べて多くのプラスとマイナスの者を持っています。 EMも同様に使用できます。私は、EMは画面のサイズではなく、ズームの影響を受ける中間のものだと思います。
多くの理由があります。パーセンテージの幅は、他のもの（ブラウザのサイズなど）に相対的に要素のサイズを変更する場合に非常に便利です。さまざまな状況に合わせてページを動的に変更することができます。一方、ピクセルは、変更されない精度のサイズが必要な場合に便利です。一部のユーザー（たとえば私）は、ピクセルとパーセントの両方を使用して要素の配置方法を指定します。他の人（例えば、私以外の人：P）は、これがあなたに馬鹿だとあなたに伝えます。
私は自分のウェブサイトでピクセルを使用していますが、最大幅は1000ピクセルです。私のウェブサイトはモバイルデバイスで非常にうまくやっていませんが、私の11" ネットブック上で適切に表示しますが、それがために、これが何であるかである：私はすべてを再検討するた、割合は非常に時間がかかるでウェブサイトを開発して見つける
<link rel="stylesheet" href="/styles/mobile.css" media="handheld" />
など-sizingイベント：
overflow:scroll;
ピクセルと割合の両方が彼らの特典がありますが、私はピクセルがあるため精度のより良い選択であると言うでしょう、信頼性、および開発が容易である。また別のものは、検討します。フォントのピクセル数とパーセンテージです。これは私の経験則です：
フォントを拡大する必要がある人がいる場合は、常にフォントの割合を使用する方が良いでしょう。
私はDIVの％がフォントに適していると思っています。 :) –
％は、ベクターグラフィックスと同じように現代の世界に行く方法です。画面が拡大または縮小するにつれて、解像度に関係なく適切に拡大/縮小できます。
明らかに間違いはありません。むしろ流動性の問題です。
ピクセルでオブジェクトを相対的に配置し、正確な高さと幅を制御する方が簡単です。
オブジェクトのスケーリングは、パーセントで容易になります。ウィンドウの幅の50％は、画面のサイズに関係なく常にウィンドウの半分になります。インナースタイルtopプロパティで
私はそれが主に意見に基づいていると感じているので、私はこの質問自体を話題としてフラグを立てました。したがって、回答は難しい事実の代わりに意見に基づいている傾向があります。あなたの答えは基本的に「他の誰かがXを好きなので、Xはもっと良くなければなりません」ということです。それはもっとコメントです。 – Mike
が%であるので、それは200px*0.3=60px
#outer{
border-style: dotted;
position: relative;
height: 200px;
}
#inner{
border-style: double;
position: absolute;
top: 30%; <<<<<<<<<<<<<<
}<div id="outer">
outer
<div id="inner">
inner
</div>
</div>としてカウントされます。ここトップは30pxです。それはそのままです。
#outer{
border-style: dotted;
position: relative;
height: 200px;
}
#inner{
border-style: double;
position: absolute;
top: 30px; <<<<<<<<<<<<
}<div id="outer">
outer
<div id="inner">
inner
</div>
</div>使用 = D
どちらのあなたはいつも、両方のあなたはそれについて混乱している場合は使用して組み合わせることができますして）
calc()はシンプル行うためのネイティブCSSの方法です任意の長さの値（またはかなり多くの任意の数値）の代わりにCSSで数学を使うことができます。
それは4つの簡単な数学演算子を持っている： add (+)、 subtract (-)、 multiply (*)、および divide (/)。
.my-class {
widht: calc(100% - 20px);
height: calc(50% + 10px);
}
ブラウザサポートは驚くほど良好です。 Can I use...
便利な読書：CSS-Tricks
は私も割合が好き、それは特定のケースでは、それは私が期待しません。たとえば、最大幅：50％の同じ行を共有する2つのボタンがあり、現在のビューポートが偶数でない場合、そのうちの1つは常に目立ってわずかに大きくなります。
いずれにも利点はありません.1kgの50％、つまり500グラムをアプリケーションに応じて教えてくれるようです。 – Jakub