画面がマルチピクセルになり、ピクセルがほとんど区別できない場合、どのようにタイプセットしますか

この投稿は、将来のサイトのレイアウトに関する特定の決定についてではなく、habrasocietyの意見、私たちがどのように生きることができるかについてのコレクションです。



この質問は偶然ではありませんでした。 興味深いプロジェクトがあり、その顧客はiPadとiPhoneのファンです。 彼らにとって、サイトがあちこちで同様によく表示されることが非常に重要です。 つまり、画面の幅は800から2000ピクセル幅まで変動します。





デザインの写真をどうしますか?



はい、今ではすべてのブラウザがサイトを適切にスケーリングすることを学んでいます。 Ctrlを押し、スクロールをツイストし、サイトをあなたに合ったサイズにします。 しかし、ラスターイメージを3つで30 x 80ピクセル増やしても、美しさは増しません。



レイアウトデザイナーの日常業務では、ピクセルに完全に依存しているという事実にすでに慣れています。 私たちはすべてピクセルで数えます。 写真をどのように埋め込むかは問題ではありません。バックグラウンドで、またはImgタグで。



私は2つの基本的な決定を見ます:



1. JSは、特定の解像度のさまざまなファイルを使用して、画面のサイズを決定し、特定のCSSファイルを提供します。これにより、必要な画像が読み込まれます。



2.サイトの設計におけるベクターグラフィックスへの移行。





いくつかのCSSファイルと画像のセットを使用します



一般的に、これは解決策です。 いくつかのグラデーションを決定します:

2,048-1,601ピクセル

1,600-1,281ピクセル

1,280-1,025ピクセル

1,024-800ピクセル。



おそらく電話の解像度はさらに低くなります。



この場合、サイトはさまざまな画面で高品質で自信を持って開きます。スクロールをスクロールする必要はありません。 JSがいくつかの妄想のために無効にされた場合、彼ら自身が責任を負い、彼らは何をしようとしていたかを知っていました。 しかし、統計によると、そのようなものはほとんどありません。



欠点:余分な写真、余分なcssファイル、レイアウト時間の延長。 まあ、変更を加えることも4倍長くなります。





ベクターグラフィックス



主な欠点:バージョン9以下のIEのサポートの欠如。 しかし、この欠点はなくなり、私たちは未来について話している。



2番目の欠点:写実的な写真をベクトルに変換することは最良の選択肢ではないかもしれません。 いいえ、最初にサイトが曲線で描かれていれば問題はありません。 良い写真がある場合、またはデザイナーがPhotoshopのみで作業している場合、問題は深刻です。 ソフトウェアレンダリングは過剰になり、手動レンダリングは過剰になります。



そして、バックグラウンドで暖かいチューブテクスチャをどうしますか? また、ベクトルに変換されますか? そして、ラスターに残っている場合、異なる画面ではテクスチャのスケールが異なります。





答えよりも多くの質問。



私は、私自身が将来を不確かに見ていることを正直に認めています。 たぶん、問題は一般に大げさで、教義上の変更は私たちを待っていません。



コメントをいただければ幸いです。





このテーマのHabrに関するトピック



さよならピクセル

フォントのズームとレイアウト

適切なゴム

すべてのデバイスに対して1つのサイトを作成する方法(レスポンシブWebデザイン)



この事後調査を書きたいという願望は、後に生じました。

ファジィアイコンは私たちを疲れさせる





そして主な質問:ピクセルアートはどうですか?



私はピクセルグラフィックスの大ファンであり、320 x 240の通常の解像度を例外なくすべてのモニターに戻すことを要求しています。



All Articles