gpt4 book ai didi

html - CSS 宽度媒体查询在高度 <= 宽度时失效

转载 作者:行者123 更新时间:2023-11-28 01:39:12 25 4
gpt4 key购买 nike

我正在创建一个两列布局 - 左侧固定,右侧流动 - 如果屏幕分辨率在 320 到 649 之间,我正在使用媒体查询将左列放在右侧(主要内容)下方px(纵向或横向)。

当我测试布局以查看它如何响应更改屏幕宽度时,它工作得很好。但是,当我开始更改高度时,媒体查询中指定的断点规则有时会失效,并且布局会恢复为默认值。

我注意到这个失效点恰好是高度等于宽度的时候。例如,如果我将浏览器(我使用的是 Chrome Canary 开发者控制台)的宽度调整为 480 像素,只要窗口的高度大于 480 像素,一切都可以按照媒体查询正常工作。当我将高度调整为小于宽度(例如 479 像素)时,媒体查询中的规则不再适用,布局恢复为原始布局。

这里是布局代码的简短摘录:

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

}

我不确定高度改变时是什么导致布局发生这种变化,因为我没有任何指定高度的媒体查询。有人知道问题出在哪里吗?

最佳答案

设法找到了错误-纵向查询的代码与横向查询的代码不同。

关于html - CSS 宽度媒体查询在高度 <= 宽度时失效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27002739/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com