自分のパソコンでホームページを作ったのですが、他のパソコンで見るとめちゃくちゃになっていました_html/css_WEB-ITnose
画面が小さい場合はスクロール バーが表示されますが、水平スクロール バーは不要で、コンテンツをトリミングしたくありません。
次に、CSS メディア クエリを使用してレスポンシブなスクロール バーを作成します。でも効果はまだ満足できません
ディスカッションへの返信(解決策)
知識があまりないので詳しく教えてください、よろしくお願いします!約データ/画面 これは、Baidu の統計的な解像度の使用状況です。
ページに固定幅を設定すると、内部の要素も固定幅になります。
メディアからの問い合わせは減らしてください。やればやるほど疲れます。いくつかの場合にカスタマイズしてください。
------------------------
ページ上の最大のコンテナをレスポンシブにしたい場合は、メディアクエリに従っていくつかの幅を設定します
その後ネストします各行のコンテナ、幅 100%
小さなブロックの幅をピクセル単位で制限する必要がない場合は、3 つの小さなブロックすべての幅を 33% にすることもできます。幅をパーセンテージで指定します。
ページを適切に制御できないと感じる場合は、レスポンシブにしないでください
http://tongji.baidu.com/data/screen これは、Baidu の統計的な解像度の使用状況です。
ページに固定幅を設定すると、内部の要素も固定幅になります。
メディアクエリの使用を減らしてください。やればやるほど疲れます。いくつかの場合にカスタマイズしてください。
------------------------
ページ上の最大のコンテナをレスポンシブにしたい場合は、メディアクエリに従っていくつかの幅を設定します
行コンテナは小さなブロック コンテナにネストされ、各コンテナはピクセル幅 float:left を指定します。現在のブラウザの解像度が低い場合、これらの小さなブロックは垂直方向に配置されるように「圧縮」されます。解像度が高くなると、小さなブロックが水平に配置されます。
小さなブロックの幅をピクセル単位で制限する必要がない場合は、3 つの小さなブロックすべての幅を 33% にすることもできます。幅をパーセンテージで指定します。
レスポンシブにする必要はなく、ページ構造が変わるようです。
このウェブサイトは1680*1050のコンピューターを使用して作成しました。ただし、1920*1680 のコンピュータで表示すると画面が空白になり、1366*768 のコンピュータで表示すると水平スクロール バーが表示されます。ただし、Web サイトが少し圧縮されてスクロールが表示されなくなることを望みます。解像度が非常に低い場合を除き、バーが表示されます。
コンテナ内のセル速度の合計である 1366x768 の水平スクロール バーがあり、ページの合計幅がスクロール バーを拡張します。チェック。
ただし、次の大規模 Web サイトの慣例に従い、幅を 1000 または 1190 に設定することをお勧めします。脇が露出しすぎても心配しないでください。
または淘宝網のアプローチを真似してください。
私の現在の解像度: 1920x1080、次のウェブサイトを参照してください:
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 検出は、どの要素が画面の外にあるのかを見つけるのに役立ちます...

ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

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

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

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

ホットトピック









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

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

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

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

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

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

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

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