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;
    }
}

在调整浏览器大小的某些阶段，

方向无法正常运行。

如何编写正确的CSS？

是否可以使用CSS？

编辑：

我正在附加图片在调整浏览器 enter image description here

大小时的样子

Answer 1

您可以使用这些媒体查询功能访问浏览器的aspect ratio：aspect-ratio | min-aspect-ratio | max-aspect-ratio。有关详细信息，请查看MDN上的CSS media queries。

纵向的宽高比大于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;
    }
}

更新：图片是文档流的一部分，除非正文还使用body {height: 100%;}填充视口，否则不会填充视口，如此{{3 }}

尝试img {position: absolute;}将图像拉出流量，因此尺寸不受身体尺寸的限制。请参阅JSFiddle。

Answer 2

您遇到的问题是您依赖于浏览器无法识别的“orientation：landscape”文本。使用下面的代码检查设备的高度和宽度以计算其方向。感谢能真正帮助媒体查询的css-tricks.com，这里是媒体查询最常见用途的一个例子。

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

来源http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Answer 3

我有类似的需求，但我正在使用：

        <link rel='stylesheet' media='screen and (max-aspect-ratio: 4/3)' href='css/tall.css' />
        <link rel='stylesheet' media='screen and (min-aspect-ratio: 4/3)' href='css/wide.css' />

唯一的问题是，当我点击768 x 1024时它显示正确，但是当我转到1024 x 768时，我得到一个空白页面。我正在使用简单的css显示分配，如：

display:none;

打开或关闭div，这有效，但我的问题是如何在不中断的情况下制作连续流？在1024 x 768

我现在正在使用它：

        <link rel='stylesheet' media='screen and (orientation:portrait)' href='css/tall.css' />
        <link rel='stylesheet' media='screen and (orientation:landscape)' href='css/wide.css' />

我想使用max-aspect-ratio而不是，因为这让我可以更好地控制何时发生变化。我的意思是我不能把1.333比率和1.334比较糟糕......

- NEW UPDATE

         <!-- tall -->
         <link rel='stylesheet' media='screen and (max-aspect-ratio:4/3) and (min-width:0px) and (max-width:1023px)' href='css/tall.css'/>
         <!-- tall -->
         <link rel='stylesheet' media='screen and (max-aspect-ratio:4/3) and (min-width:1025px) and (max-width:9999px)' href='css/tall.css'/>
         <!-- wide -->
         <link rel='stylesheet' media='screen and (min-aspect-ratio:4/3)' href='css/wide.css'/>

我想我通过上面的代码修复了我的问题，这令人失望。但它到目前为止工作，我只需要测试几乎每个屏幕，以确保查询“条款”仍然显示更高的分辨率，完全4：3。我试过2048 x 1536 iPad3 Retina并显示，不知道为什么1024 x 768失败......但正在使用上面的修复。

----更新2（我讨厌痛苦但是）这似乎是宽高比最简洁的解决方案：4/3：

         <!-- tall 1.33301 -->
 <link rel='stylesheet' media='screen and (max-aspect-ratio:4095/3072)' href='css/tall.css'/>
         <!-- wide 1.33333 -->
 <link rel='stylesheet' media='screen and (min-aspect-ratio:4096/3072)' href='css/wide.css'/>

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

3 个答案: