html - 媒体查询不适用于调整浏览器大小调整

Question

我一直在使用媒体查询来使我的网站具有移动响应能力。我一直在使用 Google Chrome 模拟器功能来测试它，一切都很好。

然而，我不明白的是，当我调整浏览器时，它无法对媒体查询做出正确反应。我猜是因为我只是改变了屏幕的宽度而不是高度，这就是我想导致一个我不知道如何正确处理的问题。

这是我在 CSS 文件中实现的媒体查询代码（以防您需要查看它）。

    /* MEDIA QUERIES FOR VERTICAL VIEWING */

/*For Older, Smaller Smart Phones */
@media screen and (min-width:300px)
{
    .paral
    {
        min-height: 60vh;
        background-attachment: fixed;
        background-size: cover;
        background-position: 50% 50%;
        width: 100%;
        height:100vh;
    }
    .paral h1
    {
        color: white;
        font-size: 8vw;
        text-align: center;
        padding-top: 40px;
        word-wrap:normal;
    }
    .paral p
    {
        font-size: 4vh;
        color:white;
        text-align: center;
        line-height: 60px;
    }
    .paral-home-setting
    {
        width: 70vw;
    }
    .btn-home-margin
    {
        margin-top:5vh;
        width:33vh;
        font-size: 5vw;
    }

}




/*For Modern Smart Phones */
@media screen and (min-width:350px)
{
    .paral
    {
        min-height: 60vh;
        background-attachment: fixed;
        background-size: cover;
        background-position: 50% 50%;
        width: 100%;
        height:100vh;
    }
    .paral h1
    {
        color: white;
        font-size: 7vw;
        text-align: center;
        padding-top: 40px;
        word-wrap:normal;
    }
    .paral p
    {
        font-size: 4vh;
        color:white;
        text-align: center;
        line-height: 60px;
    }
    .paral-home-setting
    {
        width: 70vw;
    }
    .btn-home-margin
    {
        margin-top:6vh;
        width:30vh;
        font-size: 5vw;
    }

}
/* For Small Tablets */
@media screen and (min-width:500px)
{
    .paral h1
    {
        color: white;
        font-size: 8.5vw;
        text-align: center;
        padding-top: 4vh;
        word-wrap:normal;
    }
    .paral p
    {
        font-size: 4vh;
        color:white;
        text-align: center;
        line-height: 60px;
    }
    .paral-home-setting
    {
        width: 80vw;
    }
    .btn-home-margin
    {
        margin-top:6vh;
        width:30vh;
        font-size: 5vw;
    }

}

/* For Medium Tablets */
@media screen and (min-width:700px)
{
    .paral h1
    {
        color: white;
        font-size: 8.5vw;
        text-align: center;
        padding-top: 4vh;
        word-wrap:normal;
    }
    .paral p
    {
        font-size: 4vh;
        color:white;
        text-align: center;
        line-height: 6vh;
    }
    .btn-home-margin
    {
        margin-top:6vh;
        width:35vh;
        font-size: 5vw;
    }
    .paral-home-setting
    {
        width: 80vw;
    }

}

/* For Large Tablets */
@media screen and (min-width:1000px)
{
    .paral h1
    {
        color: white;
        font-size: 7vw;
        text-align: center;
        padding-top: 4vh;
        word-wrap:normal;
    }
    .paral p
    {
        font-size: 4vh;
        color:white;
        text-align: center;
        line-height: 6vh;
    }
    .btn-home-margin
    {
        margin-top:6vh;
        width:35.8vh;
        font-size: 5vw;
    }
    .paral-home-setting
    {
        width: 80vw;
    }

}

/* For Standard Laptops */
@media screen and (min-width:1280px)
{
    .paral h1
    {
        color: white;
        font-size: 4vw;
        text-align: center;
        padding-top: 4vh;
        word-wrap:normal;
    }
    .paral p
    {
        font-size: 4vh;
        color:white;
        text-align: center;
        line-height: 6vh;
    }
    .btn-home-margin
    {
        margin-top:6vh;
        width:36vh;
        font-size: 2vw;
    }
    .paral-home-setting
    {
        width: 50vw;
    }

}

标签： htmlcssmedia-queries