いくつかのメディア クエリ @media を共有して、適応型キー解決を実現します

時代の発展に伴い、以前はフロントエンド エンジニアは 1 つのページに対して 2 つのコード (PC 用とモバイル用) を作成する必要がありましたが、現在は 1 つだけです。コードのセットだけで十分です。なぜなら、メディア クエリ、つまり @media メソッドを使用できるからです。次に、自己適応を実現するための メディア クエリ @media のいくつかの主要な解決策を紹介します。必要な場合はそれを参照できます。

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

1. まず、ブートストラップからトラバースされた次のコードを見て、最小幅が

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

#2。Web ページの適応におけるいくつかの重要な解決策を実現するには @media を使用します

上記のことから、いくつかの重要なポイントの解決策があることがわかり、独自のアダプティブ コードを簡単に記述できます

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

@メディア (最小幅: 992px){ //>=992 デバイス}

@メディア (最小幅: 1200) { //>=1200 デバイス}

以下に @media (min-width: 768px) と書くと大変なことになります。デバイス}

@メディア (最小幅: 992px){ //>=992 デバイス}

@メディア (最小幅: 768px){ //>=768 デバイス}

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

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

@メディア (最大幅: 1199){ //

@メディア (最大幅: 991px){ //

@media (max-width: 767px){ //

3. 上記の入門学習の後、高度なハイブリッド アプリケーションを柔軟に使用できるようになります。 ## @メディア スクリーンと (min-width:1200px){ #page{ width: 1100px; }#content,.div1{width: 730px;}#Secondary{width:310px} }

@media スクリーン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) および (max-width: 767px){ #page{ width: 450px; ,. div1{幅: 420px; 位置: 相対;#secondary{display:none}#access{width:450px; }#access a img{display:none}ディスプレイ: なし}#branding #s{ディスプレイ: なし} }

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

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

以上がいくつかのメディア クエリ @media を共有して、適応型キー解決を実現しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。