ホームページ > ウェブフロントエンド > htmlチュートリアル > 初心者さん、Webページを作成する際にWebページの設定に適したサイズはどれくらいでしょうか? _html/css_WEB-ITnose

初心者さん、Webページを作成する際にWebページの設定に適したサイズはどれくらいでしょうか? _html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 12:23:39
オリジナル
4200 人が閲覧しました

このような Web ページのサイズを実現したいと考えています。
デザインされた Web ページ、ユーザーのクライアント解像度が異なる場合、Web ページはそれに応じて調整されます。
自分で Web ページを作成した場合、解像度は正常に表示されますが、他の人のコンピュータでは、背景などが正しく表示されません。画像がタイル状に表示されます。一度表示したら、もう一度半分を表示します


ディスカッション (解決策) に返信

すべての解像度を無効にするには、100 ポイントを使用します。

相対レイアウトを使用する場合、この問題は発生しません

デザインされた Web ページのクライアント解像度が異なる場合、Web ページはそれに応じて調整されます。
jsを使用して解像度を識別して別のスタイルを呼び出すこともできますが、複数のスタイルのセットを記述する必要があるため非常に面倒です
2階と3階で説明したように、パーセントまたは相対レイアウトを使用することをお勧めします。 、「背景」と言いました。画像はタイル表示に 1 回表示され、その後半分が表示されます。」
これは、背景を中央に配置し、その後 1 回だけ表示するだけです。
background:url() center no -繰り返し

現在、多くの Web ページがレスポンシブ レイアウトを推奨しています。次へ

2 つの方法、960 レイアウトまたはレスポンシブ レイアウトを理解できます。

960 レイアウトのデフォルトのページは 960 ピクセルで、広い辺は空白のままです。レスポンシブ レイアウトはすべてパーセンテージで行われます。
レスポンシブ レイアウトは今人気です

レスポンシブ レイアウトを使用して試すことができます

背景画像をタイル表示しないように設定でき、背景画像を背景色に合わせてデザインできます

背景画像を次のように設定できますタイルではなく、背景画像を背景色と一致するようにデザインできます。 一致


初心者、学習者

質問:

csdn フォーラムの Web ページがユーザーの解像度によって変化するのと同じです。
例: 1024*768 と 1280*1024 と比較すると、画像のテキストは大きくなりますが、レイアウトは乱雑ではありません。画像が大きくなったり、小さくなったりするのはなぜですか?私はこのようなことを達成したいだけです

質問:

csdn フォーラムの Web ページがユーザーの解像度に応じて変化するのと同じように。
例: 1024*768 と 1280*1024 と比較すると、画像のテキストは大きくなりますが、レイアウトは乱雑ではありません。画像が大きくなったり、小さくなったりするのはなぜですか?これを実現したいだけです
画像を大きくするか小さくするかをどのように制御しますか?
ピクセルと解像度の関係を理解し​​てください

わかりません。気の毒だと思う! Web開発は初めてです!

コンピューターの画面解像度を変更できます。csdn Web サイトを見ればわかります。どう説明したらいいのかわかりません

比較的適応力があるのは実際には努力が必要です。経験豊富なユーザーではないため、これを最終バージョンとして使用しないことをお勧めします

私の提案は、幅の異なるバージョンをさらにいくつか作成することです。 、js を通じてクライアントを判断し、比較的狭いものを選択します (適切に一桁減らすことができます)
Cookie を記録すると、将来のページはこの Cookie をページ レイアウトの基礎として読み取ることができます
さらに、いくつかのボタンJS の判断エラーを避けるために、顧客が選択できる幅はページ上で予約する必要があります。もちろん、カバー Cookie を手動で調整することもできます

その後、相対的な適応性を課外の宿題として使用して、実現可能な最終的な単一バージョンを開発します

とにかく、私はそうします1 つのバージョンが携帯電話、ノートブック、1080p、4k 画面に同時に適応できるとは思いません...まだです 一部の画面は直立できると言われています

固定幅、中央揃え。 Web ページに背景色を追加します。

初心者には960レイアウトを直接使用する方が安全ですが、レスポンシブレイアウトを学ぶこともできますが、このレイアウトは320から1920までの一連の幅のパフォーマンスを考慮し、部分を非表示にする必要があります。必要に応じて この内容は初心者にとっては確かに要求が高すぎます。

960 グリッド システムを確認できます

解像度を見てください。一般的には 1024*768 です

比較的適応するためには実際には多くの努力が必要です。経験のないユーザーはこれを最終的に使用しないことをお勧めします。バージョン


同意します! ! !
さらに、主要な Web サイトの CSS を見てみると、クソは比較的適応性が高いことがわかります。難しいものはB。

width:100%

質問:

csdn フォーラムの Web ページがユーザーの解像度に応じて変化するのと同じです。
例: 1024*768 と 1280*1024 と比較すると、画像のテキストは大きくなりますが、レイアウトは乱雑ではありません。画像が大きくなったり、小さくなったりするのはなぜですか?このようなことを実現したいだけです
CSS スタイルはパーセンテージを使用するため、ブラウザーや画面サイズに応じて自動的に変更できます。

元の投稿者にブートストラップのソース コードを見て、指示に従ってもらいます。

background:url() center no-re は、画像を並べて表示する問題を解決します。

また、幅: 1100px; ウェブページの幅と高さを相対的に決定します。大きなコンテナ全体に幅を 100% 追加します。解像度がどのように変化しても、Web ページのレイアウトは変わりません。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート