ホームページ >ウェブフロントエンド >htmlチュートリアル >自分のパソコンでホームページを作ったのですが、他のパソコンで見るとめちゃくちゃになっていました_html/css_WEB-ITnose

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

WBOY
WBOYオリジナル
2016-06-24 11:31:362623ブラウズ



画面が小さい場合はスクロール バーが表示されますが、水平スクロール バーは不要で、コンテンツをトリミングしたくありません。
次に、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 までご連絡ください。