Media Query无法调整浏览器大小调整

Question

我一直在使用媒体查询来使我的网站具有移动响应能力。我一直在使用Google Chromes模拟器功能对此进行测试，这一切都很有效。

我不明白的是，当我调整浏览器时，它对媒体查询没有正确反应。 我猜是因为我只是改变了屏幕的宽度而不是高度，这就是我想造成一个问题，我不知道如何妥善处理。

以下是我在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;
    }

}