css - 如何在 CSS 中编写媒体查询？

Question

我需要在以下情况下编写不同的样式

设备宽度大于设备高度

/* Landscape */
@media screen and (orientation:landscape) {
    .bg img {
        height: auto;
        width: 100%;
    }
}

设备高度大于设备宽度

/* Portrait */
@media screen and (orientation:portrait) {
    .bg img {
        height: 100%;
        width: auto;
    }
}

Orientation 在调整浏览器大小时的某些阶段不能完美工作。

如何编写正确的 CSS？

可以用 CSS 实现吗？

编辑:

我正在附上调整浏览器大小时的图片

Answer 1

您可以访问浏览器的 aspect ratio具有这些媒体查询功能:aspect-ratio |最小纵横比 |最大纵横比。有关更多信息，请查看 CSS media queries在 MDN 上。

纵向的宽高比大于 1:1，而横向则更小。为了验证，我做了一个 JSFiddle当您从“横向”切换到“纵向”时会改变颜色。

试试这个:

/* Landscape (i.e. wide viewport) */
@media screen and (min-aspect-ratio: 1/1) {
    .bg img {
        height: auto;
        width: 100%;
    }
}

/* Portrait (i.e. narrow viewport) */
@media screen and (max-aspect-ratio: 1/1) {
    .bg img {
        height: 100%;
        width: auto;
    }
}

更新:图像是文档流的一部分，不会填充视口(viewport)，除非主体也用 body {height: 100%;} 填充视口(viewport)，如本 JSFiddle .

尝试 img {position: absolute;} 将图像从流中拉出，这样它的尺寸就不会受到正文大小的限制。参见 JSFiddle .