css - 为什么我的@media 不再工作了？

Question

我的 CSS 有一些媒体查询。几天前他们工作得很好，但我只是注意到他们都没有做任何事情。 Here they are在上下文中(最后)，这是我的代码:

    /* MOBILE OPTIMISATION */

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {

    body {
        width: 89%;
        margin: 0;
    }

    .post-entry {
        width: 100%;
    }

    .widgets {
        display: none;
    }

    p.frontpage_jobs {
        width: 100%;
        float: none;
    }

    #blog-wrap {
        width: 100%;
    }

    .post-entry header h1 {
        font-size: 1.5em;
    }

}


/* TABLET OPTIMISATION */

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

body {
    width: 89%;
    //float: none;
    margin: 0;
}

.post-entry {
    width: 100%;
}

.widgets {
    display: none;
}

p.frontpage_jobs {
    width: 100%;
    float: none;
}

#blog-wrap {
    width: 100%;
}

.post-entry header h1 {
    font-size: 1.5em;
}
}

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

#main-content {
    width: 1200px;
}

.widgets {
    display: none;
}

}

编辑

我的网站是here .

Answer 1

您的媒体查询似乎有效。看起来你有溢出问题。删除“宽度:850px；”在 .post-entry 上，为#main-content 设置的宽度和 body 上的侧边距以及“width:98%;”为我解决了客户端的问题。

也就是说，如果它是您正在寻找的流体调整大小。