为 iPad Air 和 iPad Pro 设置媒体查询

问：

我被困在为不同的iPad设备设置媒体查询。在我的下一个 Js 代码中，我创建了三张卡片（或 divs），它们平均分成一行（用于它的 react-bootstrap 网格系统）。默认情况下，这些卡片可以占据整个宽度作为网格系统的一部分，但我想将其宽度限制为特定像素。 为此，我正在尝试使用 CSS 媒体查询将宽度设置为卡片类。 这是我到目前为止所做的（仅添加必需的代码库）：.post-card-main-wrapper

CSS：

/* Default styles for all devices */
.post-card-main-wrapper {
  position: relative;
  margin: 0 auto;
  width: 320px;
}

/* Styles for iPad Pro */
@media only screen and (min-width: 1024px) {
  .post-card-main-wrapper {
    width: 400px;
  }
}

/* Styles for iPad Air */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .post-card-main-wrapper {
    width: 220px;
    height: 350px;
  }
}

/* Styles for smaller screens (e.g., iPhone) */
@media only screen and (max-width: 767px) {
  .post-card-main-wrapper {
    width: 300px;
    height: 450px;
  }
}

/* Styles for the smallest screens (e.g., iPhone SE) */
@media only screen and (max-width: 479px) {
  .post-card-main-wrapper {
    width: 300px;
    height: 450px;
    margin: 0;
  }
}

HTML格式：

<div class="featured-articles-container row">
    <div class="col-sm-12 col-12">
        <div class="featured-posts">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-xl-12 col-md-12 col-sm col-12">
                        <div class="ant-divider css-dev-only-do-not-override-1i536d8 ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left ant-divider-no-default-orientation-margin-left" role="separator">
                            <span class="ant-divider-inner-text" style="margin-left:100px">
                                <h2>Featured Posts</h2>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="justify-content-center row">
                    <div class="col-xl-4 col-md-4 col-sm col-10">
                        <div class="post-card-main-wrapper">
                            <div class="post-card-img-wrapper"><img src="https://yuma.sharkthemes.com/blog-one/wp-content/uploads/sites/3/2022/01/hand-person-girl-woman-hair-photography-78292-pxhere.com_-600x800.jpg" height="100%" width="100%"></div>
                            <div class="post-card-content-wrapper" style="background:white">
                                <span class="ant-typography css-dev-only-do-not-override-1i536d8">PHOTOGRAPHY, PORTRAIT</span>
                                <h3>Some Article Title Here</h3>
                                <span class="ant-typography css-dev-only-do-not-override-1i536d8">December 2, 2022</span>
                                <div class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-multiple-line css-dev-only-do-not-override-1i536d8" style="font-size: 16px; margin-top: 1em; -webkit-line-clamp: 4;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4 col-md-4 col-sm col-10">
                        <div class="post-card-main-wrapper">
                            <div class="post-card-img-wrapper"><img src="https://yuma.sharkthemes.com/blog-one/wp-content/uploads/sites/3/2022/01/hand-person-girl-woman-hair-photography-78292-pxhere.com_-600x800.jpg" height="100%" width="100%"></div>
                            <div class="post-card-content-wrapper" style="background:white">
                                <span class="ant-typography css-dev-only-do-not-override-1i536d8">PHOTOGRAPHY, PORTRAIT</span>
                                <h3>Some Article Title Here</h3>
                                <span class="ant-typography css-dev-only-do-not-override-1i536d8">December 2, 2022</span>
                                <div class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-multiple-line css-dev-only-do-not-override-1i536d8" style="font-size: 16px; margin-top: 1em; -webkit-line-clamp: 4;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4 col-md-4 col-sm col-10">
                        <div class="post-card-main-wrapper">
                            <div class="post-card-img-wrapper"><img src="https://yuma.sharkthemes.com/blog-one/wp-content/uploads/sites/3/2022/01/hand-person-girl-woman-hair-photography-78292-pxhere.com_-600x800.jpg" height="100%" width="100%"></div>
                            <div class="post-card-content-wrapper" style="background:white">
                                <span class="ant-typography css-dev-only-do-not-override-1i536d8">PHOTOGRAPHY, PORTRAIT</span>
                                <h3>Some Article Title Here</h3>
                                <span class="ant-typography css-dev-only-do-not-override-1i536d8">December 2, 2022</span>
                                <div class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-multiple-line css-dev-only-do-not-override-1i536d8" style="font-size: 16px; margin-top: 1em; -webkit-line-clamp: 4;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

添加主桌面视图（使用iPad Air进行开发）屏幕截图：

现在的问题是，当我尝试将卡片的特定宽度设置为等距时 列（或网格），它会弄乱另一个设备的宽度。大多数时候，这是iPad Air和iPad Pro之间的战斗。

用于 iPad Air 的查询，在卡片的间距和宽度适当的情况下看起来不错。尽管我尝试对 iPad Pro 使用单独的查询，但它总是选择用于 iPad Air 的查询，并且卡片看起来完全挤在一起，没有任何空间。

添加更多屏幕截图以供参考：

我无法找出针对iPad以及其他不太常见（现实生活）设备的正确方法。任何帮助和解决方案，以在Google Chrome的尺寸中为所有当前设备使用适当的媒体查询，以及在指定响应式CSS时是否有任何规则要遵循，将不胜感激。