css - 我正在尝试使用多个 mq 进行响应式样式

Question

在我的网站上，我尝试使用媒体查询来指定移动设备尺寸、平板电脑尺寸和桌面尺寸。好吧，当我对平板电脑进行编辑时，它会将这些编辑应用到整个页面，而不是仅当它的大小适合平板电脑时。我该怎么做才能阻止这种情况并继续响应式设计。

    @media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ 
    nav{
        width: 100%;
        float: left;
        text-align: center;
        min-height: 50px;
    }
    nav > ul {
        margin-top: 50px;
        padding: 0;
        display: none;
        list-style: none;
    }


    nav > ul > li, nav > ul > li > a {
        line-height: 20px;
        display: list-item;
        margin-left: 0;
        font-size: 26px;
    }
    .hamburger {
        padding: 20px;
        display: block;
        float: left;
        text-align: center;
        color: #fff;
        font-size: 40px;
        cursor: pointer;
    }
}

    @media screen and (max-width: 768px) { 
 /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 

    nav{
        width: 100%;
        float: left;
        text-align: center;

    }
    nav > ul {
        margin-top: 50px;
        padding: 0;
        display: none;
        list-style: none;
    }
    nav > ul > li, nav > ul > li > a {
        line-height: 0px;
        display: list-item;
        margin-left: 0;
    }
    .hamburger {
        padding: 20px;
        display: block;
        float: left;
        text-align: center;
        color: #000;
        font-size: 10px;
        cursor: pointer;
    }

}

Answer 1

您可以按顺序关注此查询。希望对您有所帮助。

/* Large screen desktop */
@media (min-width: 1170px) and (max-width: 1365px){

}

/* Normal desktop :992px. */
@media (min-width: 992px) and (max-width: 1169px) {

}


/* Tablet desktop :768px. */
@media (min-width: 768px) and (max-width: 991px) {

}

/* small mobile :320px. */
@media (max-width: 767px) {

}

/* Large Mobile :480px. */
@media only screen and (min-width: 480px) and (max-width: 767px) {

}