CSS @media 多媒体查询使用总结

# 媒体查询案例

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>

@media screen and (max-width:100px){
  body{
    <!-- 样式 -->
  }
}
@media screen and (max-width: 1200px) and (min-width: 992px){
  body{background-color: #000;}
}
@media screen and (max-width: 992px) and (min-width: 768px){
  body{background-color: blue;}
}
@media screen and (max-width: 768px){
  body{background-color: red;}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# pc端常用尺寸

@media screen and(min-width: 1024px){ } /*>=1024的设备屏幕*/
@media screen and(min-width: 1100px) { } /*>=1100的设备屏幕*/
@media (min-width: 1280px) { } /*>=1280的设备屏幕*/
@media screen and(min-width: 1366px) { } /*>=1366的设备屏幕*/ 
@media screen and(min-width: 1440px) { } /*>=1440的设备屏幕*/ 
@media screen and(min-width: 1680px) { }  /*>=1680的设备屏幕*/ 
@media screen and(min-width: 1920px) { }  /*>=1920的设备屏幕*/

1
2
3
4
5
6
7

# pc端和移动端尺寸

@media screen and (min-width: 1200px){
  body{background-color: red;}  /*屏幕大于 1200px 的样式（大屏幕设备）*/
}
@media screen and (min-width: 1024px) and (max-width: 1199px){
  body{background-color: #000;} /*屏幕在 1024px 到 1199px 的样式（中屏幕设备）*/
}
@media screen and (min-width: 768px) and (max-width: 1023px){
  body{background-color: blue;} /*屏幕在 768px 到 1023px 的样式（小屏幕pad设备）*/
}
@media screen and (max-width: 768px){
  body{background-color: red;} /*屏幕小于 768px 的样式（主要移动设备）*/
}

1
2
3
4
5
6
7
8
9
10
11
12

#CSS

上次更新: 2024/11/25, 15:23:15

← JS 中 Promise 用法（简要总结） CSS 改变鼠标指针形状→