Media 媒体查询

由设计师给出屏幕的参考值，并根据这些参考值做媒体查询，展示不同的样式。

@media screen and (min-width: 320px) and (max-width: 1023px) {
    /* 样式 */
}

1
2
3

高清屏下的设备像素比通常会大于 1，需要额外处理。

@media (min-resolution: 2dppx) {
    /* 做一些操作，比如 1px 像素处理 */
}
@media (min-resolution: 3dppx) {
    /* 通常只需要考虑 2 和 3 */
}

1
2
3
4
5
6

横竖屏展示不同的样式。

@media screen and (orientation: landscape) {
    /* 横屏 */
}
@media screen and (orientation: portrait) {
    /* 竖屏 */
}

1
2
3
4
5
6

为打印机的预览做适配。

@media print {
     /* 预览页样式 */
}

1
2
3

根据设备的 DPI 做适配。

@media (min-resolution: 90dpi) {
    /* 最小分辨率为 90dpi */
}

1
2
3

# Media 媒体查询