モバイルアダプティブスタイルで@mediaを使用する方法

一般的な携帯電話のスタイル:

@media all および (orientation : 縦向き) {
/*縦画面*/
}
@media all および (orientation : landscape) {
/*横画面*/
}

携帯電話の高さのスタイルを指定します:

@media スクリーンと (最大幅: 750px)
@media screen and (min-width: 720px) and (max-width: 960px) 720 <= xxx < 960 のデバイス}

さまざまなデバイスに応じて設定されるスタイル:

@media (最小幅: 768px) { //> = 768 台のデバイス}
@media (最小幅: 992px) { //> = 992 台のデバイス}
@media (最小幅: 1200) { //> = 1200 デバイス}

順番に注意してください。下に @media (min-width: 768px) と書くと悲劇になります。CSS ファイルは上から下に読み込まれるため、後の CSS の方が優先されるからです。

@media (最小幅: 1200) { //> = 1200 デバイス}
@media (最小幅: 992px) { //> = 992 台のデバイス}
@media (最小幅: 768px) { //> = 768 台のデバイス}

なぜなら、1440 の場合、1440>768 なので、1200 は無効になります。

したがって、min-width を使用すると、小さい方が上に、大きい方が下になります。同様に、max-width を使用すると、大きい方が上に、小さい方が下になります。

@media (最大幅: 1199){ //<=1199 デバイス}
@media (最大幅: 991px){ //<=991 デバイス}
@media (最大幅: 767px){ //<=768 デバイス}

小さな例を添付する

<スタイル タイプ="text/css">
@media (最大幅: 768px) {
。変化{
高さ: 100%;
フロート: 右;
マージン: 15px;
}
}
@media (最小幅: 768px) {
。変化{
表示: なし;
}
}

画面サイズの変更に応じて上部のナビゲーション バーも変化し、最終的にナビゲーション バー内のすべての項目が右上隅のボタンに移動されることがわかります。
このデモは非常にシンプルで、最初のアダプティブデモを記録するために使用されました

注意すべき主な構文は次のとおりです。

1. @media (最大幅: 768 ピクセル) {
CSS コード;
}
//
「max-width limit width: 768px」は主に、このコントロールの幅が 768px 未満の場合にのみ次の CSS コード ブロックが実行され、それ以外の場合は既存の CSS コードが実行されることを意味します。
「min-width 最小幅: 768px」は主に、このコントロールの幅が 768px より大きい場合にのみ、次の CSS コード ブロックが実行されることを意味します。
2.
列-sm-6 列-md-4 列-lg-3
主にブートストラップ グリッド システムを表し、小、中、大の画面の異なるグリッド分布に対応します (水平行は 2、4、3、最小は 1)

以上が@media mobile adaptive styleの使い方についての内容です。皆様の学習や問題解決に役立つことを願っております。また、皆様が123WORDPRESS.COMを応援していただければ幸いです。