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

Let me start over, as I clearly didn't post my question correctly.

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

I have a site with media queries and none of my queries are working. This is a Wordpress site build on the Genesis platform.

我有一个网站有媒体查询,我的查询都没有。这是一个基于Genesis平台的Wordpress网站。

Header:

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

CSS with query:

带查询的CSS:

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

    .another_site_inner-wrap {
        float: none;
    }
}

I'm not sure what else you would need to see to help guide me in the right direction. I'm a bit of a newbie, so please excuse my lack of knowledge.

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

3 个解决方案

#1

This question is not to clear. next time please ask with more details.

这个问题不清楚。下次请询问更多细节。

321px is too small try 700px to test it first, if you are trying to change it when you shrink the window the use max-with.

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

Try changing the border and color of a div on a certain with of the page (best way to test and see the media query in action). the media query should work so the problem is how you are implementing it

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

Example:

@media only screen and (max-width: 700px){

@media only screen and(max-width:700px){

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

}

Read this and play with different querys : https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

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

#2

OPTION 1

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

OPTION 2

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

If you want the #header, .another_site_inner-wrap to float: none; in 1024px You don't need to re-declare the same CSS on 775px. All CSS under 1024px will be used from 1024px below.

如果你想要#header,.another_site_inner-wrap浮动:无;在1024px中你不需要在775px上重新声明相同的CSS。 1024px以下的所有CSS将在1024px以下使用。

#3

Set this at your <head>

在处设置此项

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

#1