CSSでパーセンテージの代わりにピクセル数を使用することは互換性の点で悪いですか？低解像度はどうですか？1〜100の範囲でそれらを使用しても大丈夫ですか？
回答:
答えは主にあなたの状況に依存するので、これは難しい質問です。
ピクセルはそれほど悪くはありません。私もほとんど使用しています。（フォントサイズの場合もあります。）
通常、レイアウトの外側のブロック要素を特定のサイズ（固定幅のレイアウトのピクセル、流動的なレイアウトのパーセンテージ）で固定し、内側の要素では可能な限りパーセンテージを設定します。
パーセンテージやemsで単純にスタイルを設定できない要素がいくつかあります。特に、そのような原則を理解していないグラフィックデザイナーからのより凝ったものがあります。
例：サイトにシンプルなスタイルの列がある場合、その幅をパーセンテージに簡単に設定できますが、スケーリングを考慮して設計されていない特定の幅の背景画像がある場合は、見栄えがよくなります。固定幅で。このような場合、ページの残りの部分が残りの幅を正しく占めるようにする必要があります。
パーセンテージのあるピクセルを一緒に使用できることに注意してください。
たとえば、これは私の最新のWebアプリの1つからのスニペットです。
min-width: 800px;
width: 80%;
max-width: 1500px;
選択は、実現したいデザインまたはレイアウトにも依存します。
以下のために固定幅のレイアウト、画素値が微細です。デザイナーが、サイズ変更の方法を考えるのも非常に複雑な、本当に凝ったものを含むPhotoshop画像を提供する場合は、間違いなくこれを選択する必要があります。
レイアウトを動的にする必要がある場合は、パーセンテージを使用して、解像度の変更に応じてレイアウトが拡大することを確認する必要があります。上記のコードスニペットを使用すると、他の方法では異常に見えるシナリオで見栄えを良くすることができます。
一部のレイアウト（たとえば、StackOverflowがすべてのスペースを占めるかどうかを想像してください）は、たとえば、幅がかなり醜いように見えます。1920ピクセル-線幅がめちゃくちゃ高いので、読むのが非常に不便になります。
これがmax-width目的です。一部の動的レイアウトでも、使いやすさと読みやすさを最大化するために、サイトの最大幅を制限する必要があります。
また、小さい画面も考慮に入れてください。
確かに800×600のデスクトップを使用する人はもういませんが、多くの人がさらに解像度の低いモバイルデバイスでWebを閲覧しています。
これがmin-width目的です。動的に拡張されたレイアウトを、小さな解像度で混雑していないように見せるためです。
これがお役に立てば幸いです。
編集：
スマッシング・ブックは、主題に関するいくつかの非常に素晴らしい考えを持っています。
編集2：
訪問者にピクセルベースのサイズ設定を強制するように投稿を表示したくありません。
（どうやら、コメントの中には私をそのように誤解している人もいます。）
それをクリアするには：
理想的なレイアウトは、可能な解像度や設定にうまく調整できるレイアウトだと思います。
ただし、すべてを完全に実行できるとは限りません。時間/リソースとターゲットオーディエンスは、サイトがその高度な機能を必要とするかどうかを判断するための鍵です。
私はあなたが与えられた仕事のために正しいものを使うことを提案しています。
サイトのより高度な調整を必要とする訪問者のかなりの割合がいるサイトを開発している場合は、それだけの価値があるかもしれません。
（もちろん、自分たちが正しい方法で物事を行っていると感じるためにそれを行うこともありますが、必ずしも経済的に健全な決定であるとは限りません。）
それでも、レイアウトを決定する前に、どのようなサイトになるのか、誰が訪問者になるのかなどについて適切な調査を行い、それらを流動的またはより動的にするために時間をかける価値があるかどうかを判断する必要があります。
すべての測定には独自の目的があります。
境界線など、ピクセルベースのものにはピクセルを使用します。幅が1.3422ピクセルになる境界線はおそらく必要ありません。
コンテンツ領域、ラベル、入力ボックスなど、テキストベースのものにはテキスト中心のメジャー（em、ex）を使用します。これは、特定の長さと幅のテキスト用のスペースがあることを確認する簡単な方法です。
列などのウィンドウベースのものにはパーセントを使用します。
もちろん、例外もあります。たとえば、最小列幅をピクセル単位で指定したい場合があります。ただし、上記に従うと、ページが適切に拡大縮小されます。常にページをズームインおよびズームアウトして、さまざまなフォントサイズやブラウザの形状でどのように機能するかを確認してください。後で驚かないでください。
最初に、CSSでピクセルを操作する際に存在する問題を理解する必要があると思います。
emおよびその他の相対サイズのみを使用する場合は、これを変更するユーザーの決定を尊重します。これは、特に年配のユーザーが多い場合は特に、テキストの多いサイトで特に重要です。一方、サイトのデザインが重要な場合は、px使いやすさを損なうことなくフォントサイズを指定することは可能であり、正当であると思います。結局、自分で決める必要があり、状況にもよるが、フォントサイズをピクセル単位で指定しても大丈夫だと思う。
ちなみに、emフォントサイズを指定する場合は、をに設定することをお勧めbodyしfont-size: 62.5%ます。つまり、基本フォントサイズは10pxなので、1emは10px、1.6emは16pxなどであり、emsを使用して設計する際にピクセル単位で考えやすくなります。特にemsの値がカスケードする場合、このように動作するのはまだイライラします。これを支援するPXtoEM.comのような非常に便利なサイトがいくつかあります。
画面はピクセルベースのレイアウトであるため、ピクセルは多くのことに対して直感的な選択です。ここでの主な問題は、ユーザーごとに画面サイズが異なることです。他の人が使用して、指摘したようにmin-widthしてmax-width一緒にピクセル単位でwidthサイトが不当に踏み付けたり非常に小さく、非常に大きな窓に延伸されるために防止しながら、画面の大きさを尊重するパーセントに役立つ方法をされています。
ただし、CSSメディアクエリを優先して、通常はこのアプローチを避けます。次に、固定幅のチャンクを使用して、画面サイズが大きくなるにつれてレイアウトを（とりわけ）広くすることができます。ただし、CSSメディアクエリは、すべてのクールなWebテクノロジと同様に、ブラウザのサポートが不足しているという問題があります。特に、JavaScriptの修正はありますが、IE8以前はそれらをサポートしていません。一方、iPhoneやその他のハンドヘルドデバイスはそれらをサポートしているので、これらのデバイスでサイトの見栄えを良くしたい場合は、これらを強くお勧めします。
固定幅のグリッドは問題ないと思います。960グリッドシステムのような固定幅グリッドシステム はそれ自体で十分に人気があり、固定幅を持つサイトは他にもたくさんあるので、これを行った場合に多くの苦情が聞こえるとは思えません。大画面を持たないハンドヘルドデバイスが問題になりますが、ここでCSSメディアクエリを使用する必要があるため、すべてをピクセル単位で指定して、デスクトップとiPhoneでサイトを美しく見せることができます。
最終的には、すべてはユーザーが誰であるか、サポートする必要があるもの、サイトをどのように見せたいかによって異なりますが、CSSでピクセルを使用することに本質的な問題はありません。
基本的に、それは誰があなたを雇っているのか、そして結果としてあなたの作品の聴衆に依存します。制度上の目的（政府のプロジェクトのようにコンテンツが形に優先する必要がある場合）では、.emまたは％を使用する方が適切であり、制御が困難ですが、アクセシビリティの点で非常にユーザーフレンドリーです。
私たちが企業のウェブサイト（形が取引である場合）について話す場合、ピクセルは彼のブランドに関する顧客の期待を満たすためのより正確なツールになります。液体インターフェース（％、. em）は、スマートに実行される場合は常に優れたものですが、極端な条件下で設計をチェックし、安定していることを確認することを忘れないでください。
ピクセルを使用する場合、サイトの最終的な外観を完全に制御できますが、一部のユーザーがピクセルを効率的に操作することは不可能であると想定する必要があります。
最良のオプション：すべてのプラットフォームと互換性のあるWebサイトを設計するのではなく（複数の欠陥のある設計になります）、あらゆる需要に適合したサイトの特別なバージョンを顧客に提案します。これは、設計者にとってもより良い実践であり、より良いビジネスです。 ..
特定の場合を除いて、可能であればそれを避けると思います。
たとえば、細い境界線の場合は、1pxを指定するだけで問題ありません。
またmax-、min-スタイル属性についても問題ありません。ただし、可能であれば、非最大/最小属性をパーセンテージにします。
max-とmin-プロパティの+1 。
これは本当に私が以前に何度も尋ねた良い質問です。筋金入りのウェブデザイナーではありません（私は開発側にいます）私は通常、一緒に仕事をしているデザイナーに彼らの意見について尋ねました、そしてこれが私が蒸留したものです：
要素のサイズ設定などにパーセンテージとピクセルを使用することは、実際には個人的な好みや特定の場合の要件の問題です。スケーリングが必要な場合、または適切にスケーリングできる場合は、パーセンテージを使用します。そうでない場合は、ピクセルを使用します。ここの人々は、ページの主要な列の例を使用しており、流動的である必要があるかもしれませんが、境界線にはピクセル測定の精度が必要な場合があります。
明らかに、画像のサイズ設定は解像度とピクセル単位にかなり関係しているので、この場合は常にそれらを使用します。
ただし、テキストにemサイズとピクセルサイズ、さらにはポイントサイズを使用することは、まったく別の魚のやかんです。私が一緒に仕事をしている人のほとんどは、1emのサイズを約12pxに下げるフォントサイズの基本リセットスタイルを持っています。次に、emsを他のすべての場所（または可能な限り他の場所の近く）で使用して、テキスト要素のサイズを設定したり、コントロールを形成したりします。デスクトップやラップトップのさまざまなブラウザ、OS、DPIでうまく機能しているように見えるので、これが私が今も操作している方法です。ただし、モバイルデバイスを保証することはできません。
ただし、アクセシビリティが重要です。障害を持つ人々が何かを使えるようにする必要がある場合や、古いと思われるものであっても、箱から出してさまざまなデバイスで作業する必要がある場合は、スケーリングが必要になります。最初からサイトを設計するためにモデルに組み込んでください。その場合、絶対的なピクセルサイズ設定は必要ないことに気付くかもしれません。
たとえば、アートを多用するデザインはおそらく単一のスケールでデザインされるでしょうが、障害を持つユーザー向けの新しい教育用Webサイトは、さまざまな状況で機能する必要があります。
W3Cは、柔軟性という理由から、仕様にサイズ設定とスケーリングを行うためのさまざまな方法を採用していることを忘れないでください。（Moustardが以前に言ったように）あなたの聴衆にとって最もよく合ってうまくいくことは何でもしなさい。
私はcss / htmlの専門家ではありませんが、私が使用する規則は、外側のコンテナーにピクセルを使用し、内側のオブジェクトにパーセンテージを使用することです。
レイアウトを確認する人とのもう1つの経験則は、3ピクセルルールです。すべてがそこにあるすべてのブラウザ内で正確に整列することはまれです。3ピクセル以下のものを移動するメリットよりも、努力が重要であることに同意しました。
デフォルトで正しいことをします。ユーザーがJavaScriptを無効にし、設定Cookieを使用せずにサイトにアクセスした場合は、できるだけ機能的でアクセスしやすいWebページをユーザーに提供する必要があります。
あなたのデフォルトのスタイルシートはダウン320×320の解像度、および無制限のサイズにまで、ブラウザのウィンドウについて何を負いませんし、まだ機能的なページをレンダリング、しかし恐ろしい必要があります。写真の忠実度が非常に重要で、ブラウザのスケーリングを信頼できない場合は、固定サイズの画像をカプセル化する要素のピクセル測定値（少なくとも最小値）を使用して、最終的には信頼できないことを確認する必要があります重要なことが隠蔽されています。最小幅とパーセンテージを指定すると、ユーザーに必要なアクセシビリティを提供しながら、必要な制御が可能になります。アクセシビリティは今のところ問題ではありませんが、サイトが成功すれば後で問題になります。
ブラウザウィンドウについて詳しく知っている場合は、デザインを保持することの重要性が追加された作業を正当化するのであれば、別のスタイルシートで固定幅を使用してもかまいません。
固定サイズをターゲットにしている場合は、ピクセルで問題ありません。ただし、さまざまな解像度や画面サイズでレイアウトを美しく見せたい場合は、パーセンテージなどのより相対的な測定値に固執する必要があります。ほとんどの人は後者をターゲットにしています。
ほとんどの場合、私はピクセルを好みます。例-コンテンツのデフォルトの幅は960pxです。「1024」では、画面の両側に小さな空きスペースがあり、問題ありません。そこにグラデーションまたは背景を配置します。「1280」、「1440」、「1680」などでは、ギャップはどんどん大きくなりますが、見栄えは良くなります。はい、800の場合-このサイトは醜いでしょう。しかし、誰が気にしますか？すべての主要なプレーヤーは800のサポートをやめました。この決議を持っている人は少なすぎます。
さまざまなサイトがありますが、%%の方がはるかに優れたソリューションになります。
画面の構成要素はピクセルです。固定ピクセルサイズで間違いはありません。他のポスターが言及しているように、スケーラブルな代替品としてパーセンテージまたは「em」を使用することもできます。