我在为不同的iPad设备设置媒体查询时遇到了麻烦。（react-bootstrap grid system used for it）.作为网格系统的一部分，卡片可以默认占据整个宽度，但我想将其宽度限制在特定的像素上。为此，我尝试使用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时是否有任何规则要遵循，将不胜感激。

我给你一个简单的想法，这样你就可以自己编码了。
请参阅container-fluid类的css。如果container-fluid的display属性是flex，那么这三列将与屏幕大小无关。
或者，如果col-xl-4.col-md-4类的display属性是inline-block，并且width被提到了25%到33%之间的某个百分比，并且每个col-xl-4.col-md-4类都被赋予float：left，那么就会发生这种情况。这种做法在媒体屏幕属性出现之前就已经使用过了。
也不要提到高度，这样高度将自动缩放。如果你提到特定的宽度，图像的大小在设备中的两个连续宽度范围之间保持不变。所以，你可以提到一个最小宽度，以适应更小的设备。除此之外，你应该根据你的要求提到一个从80%到100%不等的实际宽度。

@media only screen and (/* min width */) and (/* max-width */){

  container-fluid{display:block
  }
.col-xl-4.col-md-4{
   display : block !important;
   float:none !important;
   min-width: 300px; /*Change according to your requirement */
   width : 90%; /*Change according to your requirement */
   height:auto;
   margin : 0 auto;
   }
}

字符串

3条答案

按热度按时间

qvtsj1bj1#

如何设置.post-card-main-wrapper { max-width:100%; }？
在你的允许下，我没有修复html，只是在css中删除了你的媒体请求，将代码减少到两行：

.post-card-main-wrapper {
  margin: 0 auto 30px;
  width: min(400px, 100%);
  /* width: 400px; */
  /* max-width: 100%; */
}

个字符

赞(0）回复(0）举报 2023-11-18

pnwntuvh2#

ws51t4hk3#

我强烈建议你切换到flexbox（有时称为flex）。最新版本的Bootstrap实际上在封面下使用flex，但如果你想学习如何自己使用它，并最终利用Bootstrap的flex Package 器，这里有一个很好的教程：
https://matthewjamestaylor.com/3-column-layouts#responsive-3-column

next.js 为iPad Air和iPad Pro设置媒体查询

3条答案

相关问题

热门标签

最新问答