4

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

设备宽度大于设备高度

/* 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 做到这一点吗？

编辑 ：

我正在附上图像在调整浏览器大小时的外观在此处输入图像描述

4

3 回答 3

4

您可以使用以下媒体查询功能访问浏览器的纵横比aspect-ratio | min-aspect-ratio | max-aspect-ratio： . 有关更多信息，请查看MDN 上的CSS 媒体查询。

纵向的纵横比大于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%;}，就像在这个JSFiddle中一样。

尝试img {position: absolute;}将图像从流中拉出，使其尺寸不受主体尺寸的限制。请参阅JSFiddle。

于 2012-11-20T14:02:51.297 回答
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/

于 2012-11-20T13:54:43.190 回答
0

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

        <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 无赖...

--新更新

         <!-- 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 失败......但正在使用上面的修复程序。

----UPDATE 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'/>
于 2013-03-28T10:09:52.700 回答