Медиа-запросы перекрывают друг друга - странная ситуация - PullRequest
Новая
       5

Медиа-запросы перекрывают друг друга - странная ситуация

0 голосов
/ 05 февраля 2019

Мой медиазапрос iPhoneX перекрывает все остальные медиазапросы.Все мои другие медиазапросы принимают их размеры экрана coirreect, используя минимальную / максимальную ширину ... но по какой-то причине IphoneX делает все остальные медиазапросы недействительными.Может ли кто-нибудь помочь? 

/* images */

img{
    max-width: 250px;
    width: 100%;
  }

  /* Header image */

  .headerImg{
    max-width: 250px;
    margin: 0 auto;
    padding-top: 10px;
  }

  /* Title */

  .title{
    max-width: 250px;
    margin: 0 auto;
    padding-top: 20px;
  }

  /* voting buttons */

  .vote{
    position:relative;
    text-align: center;
    padding-top: 20px;
  }

  #vote1 .dot{
    width: 13px;
    height: 13px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: 28px;
    left: 15px;
    border: 2px solid white;
  }

  #vote2 .dot{
    width: 13px;
    height: 13px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: 30px;
    left: 24px;
    border: 2px solid white;
  }

  /* GLOBAL CLASSES */

  .flexCenter{
     display: flex;
     justify-content: center;
     align-items: center;
  }

  .paddingTopBottom{
     padding: 10px 0;
  }

<!-- iPhone4/4s -->
<link href="https://pub.s6.exacttarget.com/vaf4d25yesa" rel="stylesheet" media="screen and (min-device-width: 320px) and (max-device-width: 480px)">  
<!-- iPhone5s/5c/5se -->
<link href="https://pub.s6.exacttarget.com/asgp1bospyf" rel="stylesheet" media="screen and (min-device-width: 320px) and (max-device-width: 568px)">  
<!-- iPhone6/6s/7/8 -->
<link href="https://pub.s6.exacttarget.com/c3c1pf4b2me" rel="stylesheet" media="screen and (min-device-width: 375px) and (max-device-width: 667px)">
<!-- iPhone6+/7+/8+ -->
<link href="https://pub.s6.exacttarget.com/qjhe5zmjrys" rel="stylesheet" media="screen and (min-device-width: 414px) and (max-device-width: 736px)">
<!-- iPhoneX -->
<link href="https://pub.s6.exacttarget.com/ioeyyyvvogl" rel="stylesheet" media="screen and (min-device-width: 375px) and (max-device-width: 812px)">

А вот связанные медиазапросы. 

/* Media queries for mobile sizes */

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) { 
    .headerImg{max-width: 280px !important;padding-top: 50px !important}
    .title{max-width: 280px !important;padding-bottom: 50px !important;padding-top: 25px !important;}
    .deal{max-width: 115px !important;}
    .vote {padding-top: 0 !important;}
    #vote1 .dot {top: 11px !important;left: 15px !important;}
    #vote2 .dot {top: 11px !important;left: 9px !important;}
    .smartcapture-submit-button-wrapper{bottom: 120px !important;}
    .sc-button{height: 45px !important; width: 160px !important;}
}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) { 
    .headerImg{max-width: 280px !important;padding-top: 20px !important}
    .title{max-width: 280px !important;padding-bottom: 40px !important;}
    .deal{max-width: 115px !important;}
    .vote {padding-top: 0 !important;}
    #vote1 .dot {top: 13px !important;left: 17px !important;}
    #vote2 .dot {top: 13px !important;left: 11px !important;}
    .smartcapture-submit-button-wrapper{bottom: 80px !important;}
    .sc-button{height: 45px !important; width: 160px !important;}
}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) { 
    .headerImg{max-width: 280px !important;padding-top: 20px !important}
    .title{max-width: 280px !important;padding: 10px 0 !important;}
    .deal{max-width: 115px !important;}
    .vote {padding-top: 0 !important;}
    #vote1 .dot {top: 11px !important;left: 15px !important;}
    #vote2 .dot {top: 11px !important;left: 9px !important;}
    .smartcapture-submit-button-wrapper{bottom: 80px !important;}
    .sc-button{height: 45px !important; width: 160px !important;}
}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
    .headerImg{max-width: 200px !important;padding-top: 20px !important}
    .title{max-width: 200px !important;padding: 10px 0 !important;}
    .deal{max-width: 100px !important;}
    .vote {padding-top: 0 !important;}
    #vote1 .dot {top: 7px !important;left: 15px !important;}
    #vote2 .dot {top: 7px !important;left: 9px !important;}
    .smartcapture-submit-button-wrapper{bottom: 60px !important;}
}

/* ----------- iPhone 4 and 4S ----------- */

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    .headerImg{max-width: 170px !important;}
    .title{max-width: 160px !important;padding: 10px 0 !important;}
    .deal{max-width: 110px !important;}
    .vote {padding-top: 0 !important;}
    #vote1 .dot {top: 7px !important;left: 15px !important;}
    #vote2 .dot {top: 7px !important;left: 9px !important;}
    .smartcapture-submit-button-wrapper{bottom: 60px !important;}
}

/* ----------- Galaxy S4, S5 and Note 3 ----------- */

/* Portrait and Landscape */
@media screen and (device-width: 320px) and (device-height: 640px) and {
    .headerImg{max-width: 240px !important;padding-top: 50px !important}
    .title{max-width: 240px !important;padding-bottom: 40px !important;padding-top: 15px !important;}
    .deal{max-width: 115px !important;}
    .vote {padding-top: 0 !important;}
    #vote1 .dot {top: 9px !important;left: 15px !important;width: 10px !important;; height: 10px !important;}
    #vote2 .dot {top: 9px !important;left: 9px !important;width: 10px !important;; height: 10px !important;}
    .smartcapture-submit-button-wrapper{bottom: 90px !important;}
    .sc-button{height: 45px !important; width: 160px !important;}
}

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

Любая помощь с благодарностью.

Спасибо

Ответы [ 2 ]

0 голосов
/ 05 февраля 2019

Просто поместите свои правила iPhone 4 @media перед правилами iPhone 6.Таким образом, iPhone 6 затем переопределит iPhone 4, когда ширина будет 375px или выше.

Приведенное ниже правило будет применяться, когда ширина находится между 320px и 374px .. 

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {...}

Правило ниже будетпереопределить, когда ширина составляет от 375 до 667 пикселей; 

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2){...}
0 голосов
/ 05 февраля 2019

Erayner,

Медиа-запросы могут быть хитрыми ...

Если у вас есть операторы медиа-запросов iPhone 4 ниже операторов медиа-запросов iPhone 6,7 и 8, это будет (на самом деле)переопределите iPhone 6,7 & 8 один, потому что он указан под ним.Файл CSS читается сверху вниз.Например: 

<style>
.className {
  width: 50%;
}
.className {
  width: 100%;
}
</style>

второй .className с шириной 100% будет занимать, поскольку он последний (читается сверху вниз).

Другая причина, по которой он переопределяетпотому что медиазапрос iPhone 4 имеет диапазон от 320 до 480 пикселей, в то время как у iPhone 6,7 и 8 один диапазон находится в пределах диапазона iPhone 4 (от 375 до 667 пикселей).375–480 пикселей попадают в диапазон iPhone 4 ... и, поскольку он ниже кода iPhone 6,7 и 8, он имеет приоритет ...

Кроме того, не уверен, почему у вас слишком много вызовов !important -Может помочь нам лучше понять вашу конкретную ситуацию, если вы предоставите весь файл CSS, чтобы понять порядок ваших идентификаторов и классов.

Вы пытались разместить код медиазапроса на iPhone 4 над iPhone 6?7 и 8?И если да, то у вас такая же проблема?

...