開発における一般的な記述：
@media (媒体特性) {
选择器 {
样式
}
}
-
メディア機能は一般的に最大幅最小
幅で書かれています -
例を直接見ると、要件は次のとおりです。
视口宽度 >= 768px，网页背景色是 粉色 视口宽度 >= 992px，网页背景色是 绿色 视口宽度 >= 1200px，网页背景色是 skyblue
/* 最小值就是768px */
@media (min-width: 768px) {
body {
background-color: pink;
}
}
/* 最小值就是7992px */
@media (min-width: 992px) {
body {
background-color: green;
}
}
/* 最小值就是1200px */
@media (min-width: 1200px) {
body {
background-color: skyblue;
}
}
知らせ：
-
書き込み順序は変更しないでください。
-
クエリはcssプロパティでもあるため、cssプロパティにはカスケードプロパティがあります。
-
min-widthで書き込む場合は、書き込み順序を小さいものから大きいものへ、max-widthで書き込む場合は、書き込み順序を大きいものから小さいものへと並べ替える必要があります。
効果は次
のとおりです。幅が768pxより大きく992pxより小さい場合：幅が992pxより大きく
1200pxより小さい場合：幅が
1200pxより大きい
場合1と3の位置を入れ替えた場合：
/* css属性都有层叠性 */
@media (min-width: 1200px) {
body {
background-color: skyblue;
}
}
/* 最小值就是768px */
@media (min-width: 768px) {
body {
background-color: pink;
}
}
/* 最小值就是7992px */
@media (min-width: 992px) {
body {
background-color: green;
}
}
次に、幅が1200pxより大きい場合、CSSプロパティにはカスケードプロパティがあるため、ボディの背景色は緑色のままです。幅が1200pxより大きい場合、maが992pxより大きい要件を満たしていると、緑色になります。
ステーションBはメディアクエリを使用します
