目次
ディスカッションへの返信(解決策)
ホームページ ウェブフロントエンド htmlチュートリアル 自分のパソコンでホームページを作ったのですが、他のパソコンで見るとめちゃくちゃになっていました_html/css_WEB-ITnose

自分のパソコンでホームページを作ったのですが、他のパソコンで見るとめちゃくちゃになっていました_html/css_WEB-ITnose

Jun 24, 2016 am 11:31 AM



画面が小さい場合はスクロール バーが表示されますが、水平スクロール バーは不要で、コンテンツをトリミングしたくありません。
次に、CSS メディア クエリを使用してレスポンシブなスクロール バーを作成します。でも効果はまだ満足できません


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

知識があまりないので詳しく教えてください、よろしくお願いします!約データ/画面 これは、Baidu の統計的な解像度の使用状況です。

ページに固定幅を設定すると、内部の要素も固定幅になります。


メディアからの問い合わせは減らしてください。やればやるほど疲れます。いくつかの場合にカスタマイズしてください。
------------------------
ページ上の最大のコンテナをレスポンシブにしたい場合は、メディアクエリに従っていくつかの幅を設定します
その後ネストします各行のコンテナ、幅 100%

行コンテナは小さなブロック コンテナにネストされ、各コンテナはピクセル幅 float:left を指定します。現在のブラウザの解像度が低い場合、これらの小さなブロックは垂直方向に配置されるように「圧縮」されます。解像度が高くなると、小さなブロックが水平に配置されます。

小さなブロックの幅をピクセル単位で制限する必要がない場合は、3 つの小さなブロックすべての幅を 33% にすることもできます。幅をパーセンテージで指定します。



ページを適切に制御できないと感じる場合は、レスポンシブにしないでください
http://tongji.baidu.com/data/screen これは、Baidu の統計的な解像度の使用状況です。
ページに固定幅を設定すると、内部の要素も固定幅になります。

メディアクエリの使用を減らしてください。やればやるほど疲れます。いくつかの場合にカスタマイズしてください。
------------------------
ページ上の最大のコンテナをレスポンシブにしたい場合は、メディアクエリに従っていくつかの幅を設定します

その後ネストします各行のコンテナ、幅 100%

行コンテナは小さなブロック コンテナにネストされ、各コンテナはピクセル幅 float:left を指定します。現在のブラウザの解像度が低い場合、これらの小さなブロックは垂直方向に配置されるように「圧縮」されます。解像度が高くなると、小さなブロックが水平に配置されます。

小さなブロックの幅をピクセル単位で制限する必要がない場合は、3 つの小さなブロックすべての幅を 33% にすることもできます。幅をパーセンテージで指定します。

レスポンシブにする必要はなく、ページ構造が変わるようです。
このウェブサイトは1680*1050のコンピューターを使用して作成しました。ただし、1920*1680 のコンピュータで表示すると画面が空白になり、1366*768 のコンピュータで表示すると水平スクロール バーが表示されます。ただし、Web サイトが少し圧縮されてスクロールが表示されなくなることを望みます。解像度が非常に低い場合を除き、バーが表示されます。

コンテナ内のセル速度の合計である 1366x768 の水平スクロール バーがあり、ページの合計幅がスクロール バーを拡張します。チェック。
ただし、次の大規模 Web サイトの慣例に従い、幅を 1000 または 1190 に設定することをお勧めします。脇が露出しすぎても心配しないでください。
または淘宝網のアプローチを真似してください。

私の現在の解像度: 1920x1080、次のウェブサイトを参照してください:

baidu news 984px
sina news 1000px
sohu 1040px sina Weibo 1000px

ifeng.com 1000px
taobao 1190px。その中で、タオバオの解像度を1024x768にカットすると、タオバオのメディアクエリがあり、幅は990px​​になります

Amazonのアプローチもあり、最小は1000px、最大は1500pxです
#pageContent {max- width: 1500px; min-width: 1000px; margin : auto; overflow: hidden}

サイトが大きい場合、解像度は少なくとも 1024x968 をサポートする必要があります。ユーザーグループの特徴

皆さんは bootstarp のアプローチやいくつかの大きなサイトを見てみるように勧めていますが、あなたのアプローチは非常に奇妙です。 !別の人は、基本にもっと注意を払うべきだと考えています。

えー
画面が特定のサイズより小さい場合は、右側に空白スペースができないように、要素をこのサイズと等しくします

さらに、すべてのデバイスをまったく同じに見せたい場合は、固定幅を設定することはできません。幅が画面の外に押し出され、スクロール バーが表示されます
例: 幅 300PX の 2 つの写真が水平に配置され、画面の幅が 500PX のみの場合、スクロール バーが表示されます,
解決策: 画像を 50% に設定します (特定の状況で使用してください) 方法も異なります。自分でさらに探索する必要があります)

F12 検出は、どの要素が画面の外にあるのかを見つけるのに役立ちます...

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

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

< Progress>の目的は何ですか 要素? < Progress>の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

この記事では、HTML< Progress>について説明します。要素、その目的、スタイリング、および< meter>との違い要素。主な焦点は、< Progress>を使用することです。タスクの完了と< Meter> statiの場合

< datalist>の目的は何ですか 要素? < datalist>の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

この記事では、HTML< Datalist>について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

< meter>の目的は何ですか 要素? < meter>の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

この記事では、html< meter>について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化< Meter> < Progress>およびex

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? Mar 20, 2025 pm 05:56 PM

この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

< iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? < iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

この記事では、< iframe>外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

Giteeページ静的なWebサイトの展開に失敗しました:単一のファイル404エラーをトラブルシューティングと解決する方法 Giteeページ静的なWebサイトの展開に失敗しました:単一のファイル404エラーをトラブルシューティングと解決する方法 Apr 04, 2025 pm 11:54 PM

GiteEpages静的Webサイトの展開が失敗しました:404エラーのトラブルシューティングと解像度Giteeを使用する

See all articles