Запросы медиа-запросов CSS, перегружающие друг друга

Question

У меня есть несколько медиа-запросов в моей таблице стилей, каждый из которых изменяет некоторые стили, но не другие. Я использую 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; } 
} 

Есть ли способ, что я могу изменить то, что я делаю, чтобы не быть никаких столкновений? Это первый раз, когда я использую медиа-запросы, поэтому я могу вообще что-то пропустить.

Answer 1

Вместо

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

Вы можете использовать

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

Таким образом, он будет смотреть только на размеры экрана между 320 и 481; вместо 0 и 481

Answer 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; } 
} 

Answer 3

мне кажется вам нужно использовать min-width в этом случае, чтобы предотвратить столкновение, например:

@media only screen and (min-width : 321px) and (max-width : 480px) { 
    /* Styles */ 
}