2

我的样式表中有几个媒体查询，每个都修改了一些样式，但没有修改其他样式。我正在使用max-width查询：

@media screen and (max-width: 1024px) {
    #header .span6 { width: 60%; margin-left: 200px; }
    #error .span6 { width: 60%; margin-left: 200px; }
    #timer-block { width: 60%; margin-left: 200px;}
    #timer { font-size: 5em; }
    #start-pause { margin-left: 200px; }
    .control { width: 297px; margin-top: 0; }
    #footer { width: 60%; margin-left: 200px; }
}

@media screen and (max-width: 768px) {
    #header .span6 { width: 80%; margin-left: 75px; }
    #error .span6 { width: 80; margin-left: 75px; }
    #timer-block { width: 80%; margin-left: 75px;}
    #timer { font-size: 5em; }
    #start-pause { margin-left: 75px; }
    .control { width: 300px; margin-top: -5px; }
    #footer { width: 80%; margin-left: 75px; }
}

@media screen and (max-width: 800px) {
    #header .span6 { width: 80%; margin-left: 75px; }
    h1 { font-size: 3.5em; margin-bottom: 0px;}
    #error .span6 { width: 80%; margin-left: 75px; }
    #timer-block { width: 80%; margin-left: 75px; }
    #timer { font-size: 5em; }
    .little { font-size: 0.5em; }
    #start-pause { margin-left: 75px; }
    .control { width: 312px; margin-top: -5px; }
    #footer { width: 80%; margin-left: 75px; }
}

@media screen and (max-width: 600px) {
    #header .span6 { width: 90%; margin-left: 25px; }
    #error .span6 { width: 90%; margin-left: 30px; }
    #timer-block { width: 90%; margin-left: 30px;}
    #start-pause { margin-left: 30px; }
    .control { width: 264px; margin-top: -5px; }
    #footer { width: 90%; margin-left: 25px; }
}

@media screen and (max-width: 480px) { 
    #header { margin-top: -10px; }
    #header .span6 { width: 90%; margin-left: 25px; }
    h1 { font-size: 3em; margin-left: -15px; padding-left: 10px; }
    #interval { width: 150px; height: 40px; font-size: 2em; margin-bottom: 20px; width: 150px; }
    #error .span6 { width: 90%; margin-left: 25px; }
    #timer-block { width: 90%; margin-left: 24px; height: 100px; padding: 10px; }
    #start-pause { margin-left: 25px; }
    .control { margin-top: -5px; width: 210px; }
    #footer { width: 100%; margin-top: -20px; margin-left: 0; }
}

@media screen and (max-width: 320px) { 
    #timer-block { width: 90%; margin-left: 15px; padding: 10px; font-size: 0.8em; }
    #header { margin-top: 0px; }
    #header .span6 { margin-left: 37px; }
    #interval { margin-top: -45px; margin-left: 20px; }
    #error .span6 { width: 90%; margin-left: 15px; }
    .control { width: 141px; margin-top: -10px; }
    #start-pause { margin-left: 15px; }
    #footer { width: 95%; margin-left: 10px; }
}

有没有办法可以改变我正在做的事情以使没有碰撞？这是我第一次使用媒体查询，所以我可能完全遗漏了一些东西。

4

3 回答 3

3

代替

@media screen and (max-width: 480px)

您可以使用

@media screen and (max-width: 480px) and (min-width: 321px)

这样，它只会查看 320 到 481 之间的屏幕尺寸；而不是 0 和 481

于 2013-04-14T17:32:01.893 回答
2

设置比下一个查询的最大宽度高 1 个像素的最小宽度

例子

@media screen and (min-width: 769px) and (max-width: 1024px) {
    #header .span6 { width: 60%; margin-left: 200px; }
    #error .span6 { width: 60%; margin-left: 200px; }
    #timer-block { width: 60%; margin-left: 200px;}
    #timer { font-size: 5em; }
    #start-pause { margin-left: 200px; }
    .control { width: 297px; margin-top: 0; }
    #footer { width: 60%; margin-left: 200px; }
}
于 2013-04-14T17:31:20.187 回答
1

我认为您需要min-width在这种情况下使用以防止碰撞，例如：

@media only screen and (min-width : 321px) and (max-width : 480px) {
    /* Styles */
}
于 2013-04-14T17:31:31.833 回答