仅在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.5 but媒体查询中的任何内容所推翻。

同样，这只是在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

}

试一试，这可能管用。