@media を使用して、Web ページのいくつかの主要な解決策を実現しますadaptation_html/css_WEB-ITnose

解像度やウィンドウ サイズが異なるデバイスではレイアウトがずれるために頭痛がすることがよくあります。@media screen を使用して適応型 Web レイアウトを実現できますが、すべての主流デバイスと互換性を持たせるにはどうすればよいかが問題になります。設定時の解像度はどれくらいですか？

メソッド/ステップ

1. 1

   まず、ブートストラップからトラバースされる以下のコードを見てください。最小幅は

   768、992、1200 です。もちろん、以前は幅が 600 ～ 480 のデバイスもあり、解像度が小さいデバイスは 767 未満として分類されていました。なぜ 768 ではなく 767 未満なのでしょうか? それは、CSS では @media (min-width: 768px) が最小値が 768 であることを意味するためです。つまり、ここでは @media ( max- width: 767px) ここでは <=767 を意味し、競合は起こりません

2. 2

   上記から、解決にはいくつかの重要な点があることがわかります。独自のアダプティブ コード

   @media (min-width: 768px){ //>=768 device}

   @media (min-width: 992px){ //>=992 Device}

   @media (min -width: 1200){ //>=1200 device}

   以下に@media (min-width: 768px)と書くと大変なことになります

   @media (min-width) : 1200){ //>=1200 デバイス}

   @media (min-width : 992px){ //>=992 デバイス}

   @media (min-width : 768px){ //>=768 device}

   1440 の場合、1440>768 であるため、1200 は無効になります。

   したがって、min-width を使用すると、小さいものが上に、大きいものが下に配置されます。同様に、max-width を使用すると、大きいものが上に、小さいものが下に配置されます。

   @media (最大幅: 1199){ //

   @media (最大幅: 991 ピクセル){ //

   @media (最大幅: 767 ピクセル) ){ //<=768 デバイス }

3. 3

   上記の入門学習の後、高度なハイブリッド アプリケーションを柔軟に使用できるようになります

   @media screen と (min-width:1200px){ #page{ width : 1100px; }#content,.div1{width: 730px;}#secondary{width:310px} }

   @media screen and (min-width: 960px) and (max-width: 1199px) { #page{ width: 960px; } #content,.div1{width: 650px;}#secondary{width:250px}select{max-width:200px} }

   @media screen and (min-width: 768px) and (max-width: 959px) ) { # page{ width: 900px; }#content,.div1{width: 620px;}#secondary{width:220px}select{max-width:180px} }

   @media のみの画面と (min-width: 480px) ) と (最大幅: 767px){ #page{ 幅: 450px; }#content,.div1{幅: 420px;位置: 相対; }#secondary{display:none}#access{width: 450px; a {padding -right:5px}#access a img{display:none}#rss{display:none}#branding #s{display:none} }

   @media のみの画面と (最大幅: 479px) { # page{ width : 300px; }#content,.div1{width: 300px;}#secondary{display:none}#access{width: 330px;} #{padding-right:10px;padding-left:10px}# にアクセスしますaccess a img {display:none}#rss{display:none}#branding #s{display:none}#access ul ul a{width:100px} }

4. 4

   ここで指定した画面が使用されます上記のコードでは、モニターは表示デバイスであることもあれば、印刷プリンターやその他のデバイスであることもあります。通常、画面を使用します。あるいは完全に省略します。メディアに関する詳細な説明を見たい場合は、Baidu でメディア クエリについて学ぶことができます

   END