Question

我正在使用最新版本的Firefox，我的媒体查询大多正常。奇怪的是，他们没有以正确的方式响应我的屏幕尺寸。这是一个例子：

.div{
    float:left;
    width:50%;
    text-align:left;
    color:#000000;
    line-height:18px;
    margin-right:15px;
    display:inline;
} 

@media all and (max-width:1366px){.div{
    float:left;
    width:40%;
    text-align:left;
    color:#000000;
    line-height:18px;
    margin-right:15px;
    display:inline;
} }

现在我的浏览器设置为1600宽度，但它仍在使用媒体查询中的代码（而不是上面的默认代码）。为什么我设置时会这样做（最大宽度：1366px）？在我的css代码中，我在很多其他情况下都注意到了这一点。我之前已经解决过这个问题，但是想确保没有简单的解释。

Answer 1

它在最新版本的firefox中以这种方式工作。对于可见的更改，我更改了float：left to float：在@media all和（max-width：1366px）

<!DOCTYPE html>
<html>
<head>
<title>media test</title>
<style>
.div{
    float:left;
    width:50%;
    text-align:left;
    color:#000000;
    line-height:18px;
    margin-right:15px;
    display:inline;
} 

@media all and (max-width:1366px){.div{
    float:right; //just for a visible change
    width:40%;
    text-align:left;
    color:#000000;
    line-height:18px;
    margin-right:15px;
    display:inline;
} }
</style>
</head>
<body>
<div class="div">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras congue, neque a luctus euismod, nisl massa faucibus erat, nec malesuada ante felis eleifend risus. Nullam nec lectus quam. Vestibulum hendrerit erat non tristique interdum. Curabitur pulvinar, risus molestie imperdiet egestas, erat diam mattis lacus, non imperdiet nibh sem id metus. Donec sed est turpis. Proin ultricies pharetra massa eget suscipit. Quisque eget enim placerat, tempor turpis vestibulum, euismod augue. Suspendisse placerat adipiscing porttitor. Nunc tempor vehicula felis at eleifend. Pellentesque vel ornare sem. Sed vitae neque vehicula, malesuada odio sed, dictum elit. Donec enim diam, placerat et ante pulvinar, tempus mattis massa. Fusce tempor dignissim dignissim. Quisque consequat risus id metus porttitor semper. Nunc ut facilisis neque. Vestibulum at ante sem.
</p>
</div>
</body>
</html>

Answer 2

您的查询没有错：Fiddle

轻微的事情，你只需要指定你想要改变的属性，不需要重复两次相同的事情。媒体查询中的样式就像所有CSS一样级联。

对未显示的媒体查询进行疑难解答：

您如何设置显示宽度？
您的浏览器缩放设置是否为100％？
您是否尝试将媒体查询设置为不同的宽度以确保它肯定会触发？我发现了一组分层的媒体查询，每个查询都有明显的变化是有用的

例如：

@media screen and (max-width:600px) {
    .div {
        background-color:red;
    }
}
@media screen and (max-width:900px) {
    .div {
        background-color:green;
    }
}
@media screen and (max-width:1200px) {
    .div {
        background-color:blue;
    }
}

媒体查询无法响应正确的屏幕大小

2 个答案: