専門家の方、アダプティブ スクリーンの質問に答えてください。 _html/css_WEB-ITnose

異なるサイズの画面に適応することについてはよくわかりません (100% 可能だと思われますが、注意が必要です...これ以外に方法はありますか?)

2 台のコンピューター (デスクトップ、画面は約21インチ）、ノートブック、14インチのようです）
個人的な小さな例をあげましょう：
ウェブサイトを真似して、他の人の背景画像を使用しました！彼の背景画像は 1830*1650 (このウェブサイト http://rappelz.eaglegamesea.com/) です

2 つの方法を試しました

1: 固定値、つまり幅と高さをすべて指定しますが、スクロールがありますバー。
2:100% 設定方法がわからないのか、それとも何かわかりませんか?画像の半分しか表示されません。

それで、ねえ、私は適応性についてあまり知りません! 、マスターしてください！

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

100%

別の文、私は今ラップトップを使用していますが、友人のためにこの Web サイトをコピーしました、彼はデスクトップのようです

別の文, 私は今ラップトップを使用していますが、友人はデスクトップを使用しているようで、画面いっぱいにしたい場合は引き伸ばされた17インチと19インチを使用しました。通常、これを行う必要はありません。ほとんどの人は問題ありません。CSDN では、このグリッドは固定幅ではありませんか? モニターの解像度が大きいほど、両側の余白が多くなります。これは正常です

まあ、ほとんどを満たしても問題ないことも理解していますが、Necessary (つまり、水平スクロール バーが表示されない) が 1 つあります
2 階の回答からの引用:

もう 1 つの文、私は今はラップトップを使用していますが、友人がこのウェブサイトを真似するのを手伝いました。彼はデスクトップを使用しているようです
相対的なレイアウトを使用し、画面いっぱいに表示したい場合は 17 ～ 19 インチを使用します
しかし、一般的には使用しません。これを行う必要はありません。CSDN さん、これで十分です。このグリッドは固定幅ではありませんか?
モニターの解像度が高くなると、両側の空白スペースが増えるのは正常です

お願いします。私の一例です。 。背景は上記の幅と高さで作成されています。
2 階からの返信からの引用:

別の文、私は今ラップトップを使用していますが、友人がこのウェブサイトを模倣するのを手伝いました 彼はデスクトップを使用しているようです

相対レイアウトを使用すると、彼は 17 ～ 19 インチを使用しました。画面いっぱいにしたい場合は、引き伸ばされていることを意味します
しかし、一般的にこれを行う必要はありません。CSDN さん、このグリッドは固定幅ではありませんか
モニターの解像度が大きいほど、 、両側に空白スペースが多くなります。これは正常です

これもデモです。幅を知る必要があるだけです。

800*600 未満です。 、Web ページの幅が 778 以内に保たれる場合、水平スクロール バーは表示されず、高さはレイアウトとコンテンツの決定によって決まります。
1024*768 未満では、Web ページの幅は 1002 以内に保たれます。フレーム全体が表示される場合、高さは 612 ～ 615 になります。水平スクロール バーも垂直スクロール バーもありません。
PSでWebページを作成する場合、800*600の状態で全画面表示でき、ページ下部にスライドバーはありません。サイズは約740*560です。

PSで作成した画像は になります。オンラインでは、色などの点で異なります。Web では 256 の WEB セーフ カラーのみが使用されますが、PS の RGB または CMYK および LAB または HSB の色域は非常に広いため、当然色損失が発生します。

ページの標準は 800*600 の解像度で作成され、実際のサイズは 778*434px です

800*600 は一般的に古いインターネットカフェの大きな PP のようなものです、標準として最大の 1024*768 を使用しましょう幅は1002です

伸縮（パーセンテージに従ってサイズをカスタマイズします）
吸着（4つのいずれかの方向が固定されます）
シーケンシャル（コンテンツのほぼ自然な配置）
複数のスタイルシート（コンテンツに応じて異なる補助スタイルシートを用意します）デバイスの画面のサイズ)

最後に、異なるデバイスの画面でメインコンテンツの表示が同じである必要があるとは考えないでください。変わらなくても大丈夫です

基本的にはそれだけです


説明していただけますか? ～！
ストレッチ (パーセンテージに基づいてカスタマイズされたサイズ)
吸着 (4 方向のいずれかに固定)
シーケンシャル (コンテンツのほぼ自然な配置)

複数のスタイルシート (デバイスの画面サイズに応じて異なる補助スタイルシートを用意)

最後に、異なるデバイスの画面が同じ表示である必要があるとは考えないでください。メインコンテンツが変更されなくても大丈夫です

基本的にはそれだけです

このように理解するには、背景画像が次の場合: width: 1024 、高さ: 900。ページを 100 % に設定すると、解像度 1024*900 の画面でちょうどよくなります。1368*760 の画面では、背景画像が水平方向と垂直方向に繰り返されます (他の CSS 条件がない場合)。設定されています）。通常、アダプティブ レイアウトの使用は推奨されませんが、ナビゲーションと下部はアダプティブにすることができます。それは、レイアウトを適応的に制御することが難しいためです。

レイアウト方法をposition:Absolute;top:0px;left:0px;right:0px;bottom:0px;として設定できます。これは全画面アダプティブであり、内部で特定のレイアウト方法を設定します。これは彼らが毎回やっていることです。 。 。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。