响应媒体查询不起作用

Question

我真的很抱歉，如果这个问题以前已经发布，但我找不到答案，我为两个版本的两个设备平板电脑和PC编写了一个非常简单的CSS文件，但它不起作用。现在，如您所见，我试图在X和Y之间使用，但似乎根本无法使用。请帮助吗？谢谢

/* Responsive tablet etc
-------------------------------------------------------------------------------*/
@media only screen and (min-device-width: 320px) and (max-device-width: 680px) {
#menubar {
    width:100%;
    height:100px;
    display:block;
    position:relative;
    background-color:#000;
    margin:auto;
    padding:0px;
    z-index:100;
}
#menubarwrap {
    width:980px;
    height:95px;
    margin:auto;
    padding:0px;
    display:block;
    position:relative;
}
#logo {
    display:inline-block;
    position:relative;
    margin:auto;
    padding:0px;
    width:100px;
    height:95px;
    background-image:url(../img/logo.png);
    background-repeat:no-repeat;
}
/* Master MENU */
#rightmenu {
    display:inline-block;
    position:relative;
    height:95px;
    width:auto;
    margin:auto;
    padding:0px;
}
/* Full image */
#banner {
    background-image:url(../img/banner.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
   -o-background-size: cover;
    background-size: cover;
    width:100%;
    height:500px;
    display:block;
    position:relative;
    margin:auto;
    padding:0px;
}

/*wrapper*/
#wrapper {
    display:block;
    position:relative;
    height:auto;
    width:480px;
    margin:auto 10px auto 10px;
    padding:5px;
}

<!-- media tablet end-->
}
/* Desktop!
-------------------------------------------------------------------------------*/
@media only screen and (min-device-width: 681px) and (max-device-width: 1600px) {
#menubar {
    width:100%;
    height:100px;
    display:block;
    position:relative;
    background-color:#000;
    margin:auto;
    padding:0px;
    z-index:100;
}
#menubarwrap {
    width:980px;
    height:95px;
    margin:auto;
    padding:0px;
    display:block;
    position:relative;
}
#logo {
    display:inline-block;
    position:relative;
    margin:auto;
    padding:0px;
    width:150px;
    height:95px;
    background-image:url(../img/logo.png);
    background-repeat:no-repeat;
}
/* Master MENU */
#rightmenu {
    display:inline-block;
    position:relative;
    height:95px;
    width:auto;
    margin:auto;
    padding:0px;
}
/* Full image */
#banner {
    background-image:url(../img/banner.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
   -o-background-size: cover;
    background-size: cover;
    width:100%;
    height:500px;
    display:block;
    position:relative;
    margin:auto;
    padding:0px;
}

/*wrapper*/
#wrapper {
    display:block;
    position:relative;
    height:auto;
    width:990px;
    margin:auto 10px auto 10px;
    padding:5px;
}

<!-- media PC end-->
}

Answer 1

而不是使用min-device-width和max-device-width
使用min-width和max-width代替

Answer 2

您是否添加了：

<meta name="viewport" content="width=device-width">

在您的HTML？