CSS媒体查询 @media 常见的媒体尺寸设置

媒体查询常见的媒体尺寸设置，通过媒体查询，针对不同的设备的尺寸设置断点来改变布局

屏幕        设备        断点
超小屏幕     手机        <768px
小屏幕       平板        >=768px ~ <992px  
中等屏幕      桌面       >=992px ~ <1200px
大屏幕       桌面        >=1200px

1
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

移动设备优先

移动设备优先：超小屏幕 超小型设备（手机，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

大屏幕设备优先

大屏幕设备优先：大屏幕 桌面在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

注意

此时超小屏幕和小屏幕在768px之间有冲突，怎么解决？可以把超小屏幕的区间降低1px。

#CSS

上次更新: 2024/01/30, 00:35:17

← CSS3动画、旋转、旋转放大、放大、移动 CSS或Js实现文字超出显示省略号→