媒体查询

宽高

min-width

@media screen and (min-width: 600px) {
    body {
        background-color: lightgreen;
    }
}

@media screen and (min-width: 600px) {
    body {
        background-color: lightgreen;
    }
}

max-width

@media screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

@media screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

min-height

@media screen and (min-height: 600px) {
    body {
        background-color: lightgreen;
    }
}

@media screen and (min-height: 600px) {
    body {
        background-color: lightgreen;
    }
}

max-height

@media screen and (max-height: 600px) {
    body {
        background-color: lightblue;
    }
}

@media screen and (max-height: 600px) {
    body {
        background-color: lightblue;
    }
}

方向

orientation：这个媒体特性用于检测设备的方向，可以是landscape（横向）或portrait（纵向）。 例如，@media (orientation: landscape) 会在设备处于横向模式时应用样式。

/*横向*/
@media screen and (orientation: landscape) {
    body {
        background-color: lightgreen;
    }
}

/*纵向*/
@media screen and (orientation: portrait) {
    body {
        background-color: lightblue;
    }
}

/*横向*/
@media screen and (orientation: landscape) {
    body {
        background-color: lightgreen;
    }
}

/*纵向*/
@media screen and (orientation: portrait) {
    body {
        background-color: lightblue;
    }
}

分辨率

resolution：这个媒体特性用于检测设备的分辨率（像素密度）。例如，@media (min-resolution: 300dpi) 会在设备的分辨率至少为 300dpi 时应用样式

@media screen and (min-resolution: 300dpi) {
    body {
        background-color: lightgreen;
    }
}

@media screen and (min-resolution: 300dpi) {
    body {
        background-color: lightgreen;
    }
}

颜色

color、color-index 和 monochrome：这些媒体特性用于检测设备的颜色能力。例如，@media (color) 会在设备支持颜色显示时应用样式

/*color,color特性用于查询设备是否支持彩色*/
@media screen and (color) {
    body {
        background-color: lightgreen;
    }
}

/*color-index*/
@media screen and (color-index) {
    body {
        background-color: lightgreen;
    }
}

/*monochrome*/
@media screen and (monochrome) {
    body {
        background-color: lightgreen;
    }
}

/*color,color特性用于查询设备是否支持彩色*/
@media screen and (color) {
    body {
        background-color: lightgreen;
    }
}

/*color-index*/
@media screen and (color-index) {
    body {
        background-color: lightgreen;
    }
}

/*monochrome*/
@media screen and (monochrome) {
    body {
        background-color: lightgreen;
    }
}

检测设备类型

device-aspect-ratio：这个媒体特性用于检测设备的宽高比(设备的物理宽高比)。例如，@media (device-aspect-ratio: 16/9) 会在设备的宽高比为 16:9 时应用样式。

@media screen and (device-aspect-ratio: 16/9) {
    body {
        background-color: lightgreen;
    }
}

@media screen and (device-aspect-ratio: 16/9) {
    body {
        background-color: lightgreen;
    }
}

aspect-ratio：这个媒体特性用于检测渲染表面的宽高比(视口的宽高比)。例如，@media (aspect-ratio: 16/9) 会在渲染表面的宽高比为 16:9 时应用样式。

@media screen and (aspect-ratio: 16/9) {
    body {
        background-color: lightgreen;
    }
}

@media screen and (aspect-ratio: 16/9) {
    body {
        background-color: lightgreen;
    }
}