Media-запросы CSS перекрывают друг друга

спасибо Stack Overflow за помощь. У меня есть пользовательский css, который я использую, чтобы подтянуть дизайн. Я продолжаю работать с этой проблемой, где, если я изменю что-то в одном медиа-запросе, скажем, для iphone 6, это изменение затем влияет на другое устройство, скажем, iphone 5. Его становление этой проблемой было я постоянно корректирую без конца в поле зрения. Вот мои @ media точки останова, которые я использую. 

/* IPHONE 6 PLUS */
@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : portrait) { 

}

/* IPHONE 6 */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px)
and (orientation : portrait) { 

}
/* IPHONE 5s */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) {

}

/* IPAD LAYOUTS */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  {
     } 


/* IPAD LANDSCAPE */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

любая помощь будет высоко appricated.

8
css html iphone responsive-design wordpress

2 ответов

Я согласен с Birdman, и вы должны рассмотреть мобильный первый подход. Однако Mobile first означает, что наименьший размер устройства полностью выходит за рамки любого медиа-запроса. Следующий размер вверх запустит первый медиа-запрос. Вам нужна только минимальная ширина, так как эти новые стили будут в дополнение к базовым стилям, а не перезаписывать их. Каждый созданный медиа-запрос будет продолжать объединяться с уже вызванными.

и вместо того, чтобы беспокоиться об iPad это, или планшет что... беспокойтесь о том, когда ваши элементы дизайна начинают выглядеть плохо. Все основные браузеры имеют достаточно интеллектуальные эмуляторы для тестирования в разных размерах устройств.

вот хорошая статья о плюсах и минусах. Я всегда код мобильного телефона во-первых, и никогда не беспокоиться о стилях столкновения, если я не делаю это нарочно:)

https://codemyviews.com/blog/mobilefirst

4

когда ширина устройства падает между диапазоном медиа-запроса, будет применен стиль. Поэтому, если ширина устройства составляет 500px, он сначала будет иметь стиль 6plus, который затем будет переопределен стилем 6, а затем 5s. Обычно не рекомендуется пытаться адаптировать CSS для конкретного устройства, но если вы хотите, вам нужно убедиться, что ни один из диапазонов не перекрывается, или они будут просто переопределены тем, какой стиль приходит последним.

2