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;” on .post-entry，为#main-content设置的宽度和body上的side-padding以及“width：98％;”为我解决了客户端的问题。

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

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

1 个答案: