最大宽度241px不能在最小浏览器大小下工作

对于240px浏览器大小，我有max-width：241px，但当浏览器大小为240px而不是调用max-width：420xpx时，此媒体查询不会被调用。最大宽度241px不能在最小浏览器大小下工作

如何解决这个问题？ Link，这里的链接，Mobile emulator

@media only screen and (max-width:241px){ 
.home-header-div{ height: 750px !important; } 
}

代替

@media screen and (max-width:420px)

来源

2016-04-27 User014019

你的意思是使用'min-width'？ – jbutler483

min-width iin 420px或240px？如果在240像素，我已经做了@ @media唯一屏幕和（最小宽度：241px）'，但它仍然不工作在240px浏览器大小:( – User014019

当浏览器尺寸为320x240像素，然后240将被调用，因为你必须为它定义规则。媒体查询将采取的范围，如果你有定义，那么它会采取定义的最后一个类似的范围..

body { 
    background-color:lightgreen; 
} 

@media only screen and (max-width: 500px) { 
    body { 
     background-color:lightblue; 
    } 
} 
@media only screen and (max-width: 490px) { 
    body { 
     background-color:red; 
    } 
}

在此例如颜色为蓝色只为10px的范围

来源

2016-04-27 09:59:02

我没有类似的范围 – User014019

浏览器大小在420它将与420Rule only， –

是的，我正在使用移动模拟器，http://www.studiopress.com/responsive/，你可以在那里检查它。在240px指定媒体查询不起作用 – User014019

240小于两241和420，因此它符合两个媒体查询的标准。这意味着如果您在两个媒体查询中将相同的属性应用于相同的元素，则将使用使用最高specificity的选择器应用的属性。如果两个选择器具有相同的特异性，则将启用SS的级联规则，并使用最后声明的属性。

没有看到您的媒体查询为420px，我只能假设后者是你的问题的原因。有两个解决方案，这将取决于您自己的需求;无论是地方420PX媒体查询的一个前为241px，就像这样：

@media only screen and (max-width:420px){/* styles go here*/} 
@media only screen and (max-width:241px){/* styles go here*/}

或者，添加一个min-width您420PX查询，像这样：上面我如何改变max-width

@media only screen and (max-width:240px){/* styles go here*/} 
@media only screen and (min-width:241px) and (max-width:420px){/* styles go here*/}

注在第一个查询中为240px，在第二个查询中使用241px为min-width; max-width表示窗口宽度必须小于或等于所提供的宽度，而min-width表示窗口必须大于或等于所提供的宽度。所以一个宽度为240px的窗口将会匹配max-width:240px。并且，通过使下一个媒体查询的min-width大1px，可以避免任何可能会重新创建原始问题的恶意重叠。

来源

2016-04-27 10:29:29 Shaggy

我已经拥有这个只有@media的屏幕和（最大宽度：420px） @media屏幕和（最大宽度：241px）'，但241px不适用于240像素的浏览器大小。我会尝试第二个选项 – User014019

我试过了你的建议，但仍然是240像素的媒体查询不起作用 – User014019

你能更新你的问题，请问一个有问题的实际例子吗？ – Shaggy

最大宽度241px不能在最小浏览器大小下工作

回答

相关问题