html - 媒体查询仅在 Safari/iOS 设备上覆盖其他媒体查询

Question

我遇到这个问题，我的媒体查询在我的 iPhone 和 iPad 上搞砸了，我的平板电脑媒体查询针对的是我的 iPhone，所以移动设备上的布局都是错误的。

我已经检查了媒体查询的顺序，它们是从最小到最大的，因为我首先从移动 View 开始设置页面样式。

.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 并且它以应有的方式呈现