ホームページ >ウェブフロントエンド >htmlチュートリアル >自分のパソコンでホームページを作ったのですが、他のパソコンで見るとめちゃくちゃになっていました_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、次のウェブサイトを参照してください:
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 検出は、どの要素が画面の外にあるのかを見つけるのに役立ちます...