html - 最小宽度与最大宽度媒体查询 CSS

Question

我希望有人能帮我解决媒体查询?。

我有一系列 min width -max width media queries 。

但是，如果我删除 max-width 语法，布局将会中断，但我不明白为什么会这样。

如果我删除 max-width 语法(包括 和 )，逻辑应该是相同的。我是说，从 应用样式320px 向上，然后从 480px 向上应用新样式

如何将其转换为最小宽度？ (移动优先方法)。

我是否漏掉了一些明显的东西？

@media only screen and (min-width: 320px) and (max-width : 480px) {
    #header h1 {
        font-size: 2em;
    }
    #nav ul li {
        margin: 0 .8em .6em 0;
        display: block;
    }

.......................more rules
}


@media only screen and (min-width: 480px) and (max-width : 800px) {
    #header h1 {
        font-size: 2.4em;
    }   
    #nav ul li {
        margin: 0 .8em .6em 0;
        display: inline-block;
....................................more rules
    }
}

Answer 1

如果您使用移动优先方法，则无需设置max-width:

所以，尝试这样的事情:

/*==========  Mobile First Method  ==========*/

    @media only screen and (min-width : 320px) {
      /*your CSS Rules*/     
    }


    @media only screen and (min-width : 480px) {
      /*your CSS Rules*/ 
    }

如果您想使用非移动优先方法，您不需要设置min-width，它看起来像这样:

/*==========  Non-Mobile First Method  ==========*/

    @media only screen and (max-width : 480px) {
      /*your CSS Rules*/     
    }


    @media only screen and (max-width : 320px) {
      /*your CSS Rules*/ 
    }