Media Query переопределяет другие медиазапросы только на устройствах Safari / iOS

Question

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

Я уже проверил порядок упорядочения медиазапросов, и с тех пор, как я начал стилизовать страницу, начиная с мобильного представления, я уже проверял их порядок.

.career-feature-icon {
        width: 100%;
        height: 300px;
        padding: 10px;

        @media screen and (min-width: 37.5rem) {
            float: left;
            width: 50%;
        }

        @media (min-width: 64rem) {
            width: 25%;
        }

        img {
            width: 200px;
            height: 200px;
            display: block;
            margin: 0 auto;
        }

        h2 {
            text-align: center;

            @media (min-width: 64rem) {
                padding-top: 20px;
            }
        }
    }

Моя стилизация есть,но это отменяется тем, что находится в медиа-запросе 37.5rem.

Опять же, это ТОЛЬКО на устройствах iOS, любая помощь очень ценится!

Answer 1

решено: я изменил свой медиазапрос с REM на px 37.5rem -> 600px 64rem -> 1024px, и он отобразил так, как он должен

Answer 2

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px (48rem to 64rem)
*/

@media (min-width: 768px) and (max-width: 1024px) {

  //CSS

}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

  //CSS

}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px (30.065rem to 47.93rem)
*/

@media (min-width: 481px) and (max-width: 767px) {

  //CSS

}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 480px (20rem to 30rem)
*/

@media (min-width: 320px) and (max-width: 480px) {

  //CSS

}

Попробуйте, это может сработать