Question

我正在创建一个双列布局 - 左侧固定，右侧流畅 - 我使用媒体查询将左侧列放在右侧（这是主要内容），如果屏幕分辨率在320之间和649像素（肖像或风景）。

当我测试布局以查看它如何响应更改屏幕的宽度时，它可以正常工作。但是，当我开始更改高度时，在某些时候，媒体查询中指定的断点规则将失效，并且布局将恢复为默认值。

我注意到这个无效点就在高度等于宽度时。例如，如果我将浏览器（我使用Chrome Canary开发者控制台）的大小调整为480px的宽度，只要窗口的高度大于480px，一切都可以正常进行媒体查询。当我将高度调整到小于宽度（例如479px）时，媒体查询中的规则将停止并且布局将恢复为原始状态。

这是布局代码外观的缩写摘录：

HTML：

<div class="wrapper">
<div class="content"></div>
<div class="left_column"></div>
</div>

CSS：

.wrapper: {width:100%;} 
.content 
{
margin-left:240px;
 float:left;}
.left_column 
{
width:240px;
 margin-left:-100%;
 float:left;
}


@media only screen and (min-width: 320px) and (max-width: 649px) and (orientation: portrait) {

.content 
{
margin-left:0;
 float:left;}
.left_column 
{
width:100%;
 margin-left:0;
 float:left;
}

}

@media only screen and (min-width: 320px) and (max-width: 649px) and (orientation: landscape) {

.content 
{
margin-left:0;
 float:left;}
.left_column 
{
width:100%;
 margin-left:0;
 float:left;
}

}

由于我没有任何指定身高的媒体查询，因此我不确定在更改高度时导致布局发生这种变化的原因。有没有人知道问题是什么？

Answer 1

管理以发现错误 - 纵向查询的代码与横向查询的代码不同。

当height＆lt; = width时，CSS宽度媒体查询失效

1 个答案: