Question

让我重新开始，因为我显然没有正确地发表我的问题。

我有一个包含媒体查询的网站，但我的查询都没有。这是一个基于Genesis平台构建的Wordpress网站。

部首：

<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">

带查询的CSS：

@media only screen 
and (min-device-width : 775px) 
and (max-device-width : 1024px) {
    #header {
        float: none;
    }

    .another_site_inner-wrap {
        float: none;
    }
}

我不确定你还需要什么来帮助我指导正确的方向。我是一个新手，所以请原谅我缺乏知识。

Answer 1

这个问题不清楚。下次请详细询问。

321px太小尝试700px首先测试它，如果你在缩小窗口时试图改变它，使用max-with。

尝试更改页面上某个div的边框和颜色（测试和查看操作中的媒体查询的最佳方法）。媒体查询应该工作，所以问题是你如何实现它

示例：

@media only screen and（max-width：700px）{

div{
 border-color:red;
 border-width: 10px;
 border-style: solid;
}

}

阅读本文并使用不同的查询： https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Answer 2

选项1

@media only screen and (max-width: 775px) and (min-width: 1024px) { 
    #header, .another_site_inner-wrap {
        float: none;
    }
}

选项2

@media only screen and (max-width: 1024px) {
        #header, .another_site_inner-wrap {
            float: none;
        }
}

如果您想#header, .another_site_inner-wrap中的float: none;到1024px，则无需在CSS上重新声明相同的775px。 CSS下的所有1024px都将在1024px下方使用。

Answer 3

在<head>

处设置此项

<meta name="viewport" content="width=device-width, initial-scale=1">

为什么我的媒体查询不起作用？

3 个答案: