Question

我希望有人可以帮我media queries？

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

但是，如果我删除max-width语法，布局会中断，但我无法弄清楚为什么会这样。

如果我删除max-width语法（包括and），逻辑应该相同..我说，从320px应用样式，然后应用来自480px的新款式

如何将其转换为min width？（移动第一种方法）。

我错过了一些明显的东西吗？

@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*/ 
    }

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

1 个答案: