# 媒体查询
写法：
@media screen and 条件1[ and 条件2] { /* ... */ }
1
# 常用属性
- width: 设备页面的可视宽度
- height: 设备页面的可视高度
- device-width: 设备的屏幕宽度
- device-height: 设备的屏幕宽度
- device-pixel-ratio: DPR
- aspect-ratio: 可视宽度 / 可视高度
- device-aspect-ratio: 屏幕宽度 / 屏幕高度
一般可以搭配
min-、max前缀以表示最小不低于、最大不超过等含义。
# 常见机型
# pc
/* PC 兼容 */
@media screen and (min-width: 600px) {
html {
font-size: 55.5555555px;
}
}
1
2
3
4
5
6
2
3
4
5
6
# iphone
/* ip5/se */
@media screen and (max-width: 320px) {
/* ... */
}
/* ip6-7-8 */
@media screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) {
/* ... */
}
/* ip6-7-8 plus */
@media screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) {
/* ... */
}
/* iphone x/xs & iphone xr & iphone xs max */
@media screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3),
screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2),
screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)
{
/* ... */
}
/* iphone 12 & iphone 12pro */
@media screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3)
{
/* ... */
}
/* iphone 12mini */
@media screen and (device-width: 360px) and (device-height: 780px) and (-webkit-device-pixel-ratio: 3)
{
/* ... */
}
/* iphone 12pro Max */
@media screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3)
{
/* ... */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
# iphone在其他浏览器的适配
# Safari
/* iphone x/xs & iphone xr & iphone xs max */
@media screen and (device-width: 375px) and (height: 635px) and (-webkit-device-pixel-ratio: 3),
screen and (device-width: 414px) and (height: 703px) and (-webkit-device-pixel-ratio: 2),
screen and (device-width: 414px) and (height: 719px) and (-webkit-device-pixel-ratio: 3)
{
/* ... */
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# Weixin
/* iphone xr */
@media screen and (device-width: 375px) and (height: 635px) and (-webkit-device-pixel-ratio: 3),
screen and (device-width: 414px) and (height: 808px) and (-webkit-device-pixel-ratio: 2),
screen and (device-width: 414px) and (height: 719px) and (-webkit-device-pixel-ratio: 3)
{
/* ... */
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 各型号iphone参数对比：
16：9
| 手机型号 | 屏幕尺寸 | 屏幕密度 | 开发尺寸 | 像素尺寸 | DPR |
|---|---|---|---|---|---|
| 4/4s | 3.5 英寸 | 326ppi | 320*480pt | 640*960px | @2x |
| 5/5s/5c | 4 英寸 | 326ppi | 320*480pt | 640*1136px | @2x |
| 6/6s/7/8 | 4.7 英寸 | 326ppi | 375*667pt | 750*1334px | @2x |
| 6p/6sp/7p/8p | 5.5 英寸 | 401ppi | 414*736pt | 1242*2208px | @3x |
19.5 ：9
| 手机型号 | 屏幕尺寸 | 屏幕密度 | 开发尺寸 | 像素尺寸 | DPR |
|---|---|---|---|---|---|
| X | 5.8 英寸 | 458ppi | 375*812pt | 1125*2436px | @3x |
| XS | 5.8 英寸 | 458ppi | 375*812pt | 1125*2436px | @3x |
| XS Max | 6.5 英寸 | 458ppi | 414*896pt | 1242*2688px | @3x |
| XR | 6.1 英寸 | 326ppi | 414*896pt | 828*1792px | @2x |
| 11 | 6.1 英寸 | 326ppi | 414*896pt | 828*1792px | @2x |
| 11Pro | 5.8 英寸 | 458ppi | 375*812pt | 1125*2436px | @3x |
| 11Pro Max | 6.5 英寸 | 458ppi | 414*896pt | 1242*2688px | @3x |
| 12 / 12pro / 13 / 13pro | 6.1 英寸 | 460ppi | 390*844pt | 1170*2532px | @3x |
| 12mini / 13mini | 5.4 英寸 | 476ppi | 375*812pt | 1080*2340px | @3x |
| 12Pro Max/13Pro Max | 6.7 英寸 | 458ppi | 428*926pt | 1284*2778px | @3x |
# Android
/* 安卓1080P长屏 */
@media screen and (device-width: 360px) and (min-height: 700px) and (-webkit-device-pixel-ratio: 3){
/* ... */
}
/* 华为P30 pro */
@media screen and (device-width: 360px) and (device-height: 780px) and (-webkit-device-pixel-ratio: 3){
/* ... */
}
/* 魅族 某古老机型 */
@media screen and (device-width: 384px) and (device-height: 640px) {
/* ... */
}
/* 小米 8 */
@media screen and (device-width: 393px) and (device-height: 818px) {
/* ... */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 开发问题
# Q1、媒体查询使用
- 定位某一种机型：
device-width、device-height以及dpr
因为不管网页在哪里被打开，
device-width只跟设备有关（同一个设备，这个值不变）
- 定位某种机型在某浏览器下：
width、height以及dpr
# Q2、开发小程序的兼容方案
iOS：
- 先按照
device-width、device-height进行开发- 效果预览：Chrome模拟器、MusicDevtools小程序预览
- 再适配：H5
- 效果预览：微信内置浏览器、云音乐App内置浏览器
- 最后适配：自带浏览器
- 效果预览：Safari
# Q3、ipxr、ipxsMax设备屏幕可见宽度/高度相同，为什么还需要写两套样式？
原因：
- “设备宽度/高度”指的是：设备屏幕可见宽度/高度（单位是缩放为100%时的“css像素”）
- 但实际上它们的ppi不同，所以设备像素个数、大小不一样：
- ipxr的分辨率：828 * 1792px（设备像素）
- ipxs Max的分辨率：1242 * 2688px（设备像素）
所以同样设定同样的css值时，它们可能最终呈现的样式可能不太一样，需要分别做适配：
/* iphone xr */
@media screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
.title {
/* DPR为2，会用 2 * 2 个设备像素去呈现 */
width: 1px;
height: 1px;
}
}
/* iphone xs Max */
@media screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
.title {
/* DPR为3，会用 6 * 6 个设备像素去呈现 */
width: 2px;
height: 2px;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 参考资料
← Sass和Less的作用、区别 像素 →