CSS媒体查询 @media 常见的媒体尺寸设置
媒体查询常见的媒体尺寸设置，通过媒体查询，针对不同的设备的尺寸设置断点来改变布局
屏幕 设备 断点
超小屏幕 手机 <768px
小屏幕 平板 >=768px ~ <992px
中等屏幕 桌面 >=992px ~ <1200px
大屏幕 桌面 >=1200px
1
2
3
4
5
2
3
4
5
常用媒体查询尺寸
1200px
1100px 1000px 1024px
980px
768px 720px
640px
480px
375px
320px
280px
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
移动设备优先
移动设备优先：超小屏幕 超小型设备（手机，768px以下）
@media screen and (min-width:390px) {}
小屏幕 768px-992px
@media screen and (min-width:768px) { ... } /* 小型设备（平板电脑，768px 以上） */
中等屏幕 992px - 1200px
@media screen and (min-width:992px){ ... }/* 中型设备（台式电脑，992px 以上） */
大屏幕 大于1200px
@media screen and (min-width:1200px){ ... }/* 大型设备（大台式电脑，1200px 以上） */
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
大屏幕设备优先
大屏幕设备优先：大屏幕 桌面在1200px以上 大型设备（大台式电脑，1200px 以上）
中等屏幕 992px-1200px
@media screen and (max-width:1200px) { ... } /* 中型设备（台式电脑，1200px 以下） */
小屏幕 768px-992px
@media screen and (max-width:992px){ ... }/* 小型设备（平板电脑，992px 以下） */
超小屏幕 768px屏幕以下
@media screen and (max-width:768px){ ... }/* 超小型设备（手机，768px 以下） */
或者
@media screen and (max-width:768px){ ... }/* 超小型设备（手机，767px 以下） */
@media screen and (max-width:390px) {}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
注意
此时超小屏幕和小屏幕在768px之间有冲突，怎么解决？ 可以把超小屏幕的区间降低1px。
上次更新: 2024/01/30, 00:35:17