CSS はさまざまな解像度を決定し、さまざまな幅のレイアウトを表示して、適応型 width_html/css

CSS はさまざまな解像度を決定し、さまざまな幅のレイアウトを表示して、適応型 width_html/css_WEB-ITnose を実装します。

WBOY

リリース： 2016-06-24 11:39:37

オリジナル

1209 人が閲覧しました

1. DIVCSS の小さなケースの説明
まず、「.abc」という名前の DIV ボックス CSS を設定し、その高さを 300px に設定し、CSS の境界線を黒に設定し、margin:0 の自動レイアウトを中央に設定します。これら 2 つのスタイルは、見やすくするためにあらかじめ設定されています。
ブラウザを手動でドラッグして幅を表示し、ブラウザの幅が 500 ピクセル以下に調整されると、対応するボックスの幅は 100 ピクセルで表示されます。 901 ピクセル以下に調整されます。「abc」は 200 ピクセルを表示するボックスの幅に対応します。ブラウザの幅が 1201 ピクセルより大きく調整されると、ボックスオブジェクトの幅は 1200 ピクセルで表示されます。1200 ピクセル未満の場合、表示幅は900ピクセル。

.abc{ height:300px; border:1px solid #000; margin:0 auto} @media screen and (min-width: 1201px) { .abc {width: 1200px}  } /* css注释：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */  @media screen and (max-width: 1200px) { .abc {width: 900px}  } /* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */  @media screen and (max-width: 901px) { .abc {width: 200px;}  } /* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */  @media screen and (max-width: 500px) { .abc {width: 100px;}  } /* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */

ログイン後にコピー

CSS コードは順番に並んでおり、CSS は大きいものから小さいものまで入力されていることに注意してください (ブラウザの幅が大きいほど、高さが高くなります)。これは論理的な関係と @media の関係によるものです。 CSSデバッグの判定は無効となります。

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>无标题文档</title> <style> .abc{ height:300px; border:1px solid #000; margin:0 auto} @media screen and (min-width: 1201px) { .abc {width: 1200px}  } /* 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */  @media screen and (max-width: 1200px) { .abc {width: 900px}  } /* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */  @media screen and (max-width: 900px) { .abc {width: 200px;}  } /* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */  @media screen and (max-width: 500px) { .abc {width: 100px;}  } /* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */  </style> </head> <body> <div class="abc">DIVCSS5实例：我这个DIV宽度会随浏览器宽度变化哦，试试改变浏览器宽度</div> </body> </html>

ログイン後にコピー

4. IE9 未満のブラウザと互換性を持たせるには、もちろん、魅力的な html

<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->

ログイン後にコピー

5 と完全に互換性があります。