响应媒体查询不工作 [英] responsive media query not working

问题描述

我真的很抱歉，如果这个问题已经发布之前，但我couldnt找到答案，我写了一个非常简单的css文件为两个版本的设备平板电脑和电脑，但它不工作。现在你可以看到我试图在分辨率x和y之间使用，但似乎没有工作。有点帮助吗？感谢

I am really sorry if this question has been posted before but I couldnt find an answer, I wrote a very simple css file for two version device tablet and PC , but its not working. Now as you can see i am trying to use between resolution x and y but doesnt seem to be working at all. A bit of help please? Thanks

/* 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-->
}

推荐答案

$ c> min-device-width 和 max-device-width

使用 width 和 max-width 而不是

Instead of using min-device-width and max-device-width
Use min-width and max-width instead

这篇关于响应媒体查询不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！