小屏幕问题中的自带网格系统
小屏幕问题中的自带网格系统
提问于 2020-10-27 00:05:30
我正在尝试创建响应性的网页布局，在不同的设备屏幕上，我应该有不同的视图。
- 2行6列(大屏幕、iPad Pro和其他设备)
- 3行4列(iPhone 6/7/8 +)
- 4行3列(iPhone6/7/8及更小设备)
这就是我试过的
<div class="row">
<div class="col-xs-2 col-md-2">
<img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
</div>
<div class="col-xs-2 col-md-2 ">
<img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
</div>
<div class=" col-xs-2 col-md-2">
<img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
</div>
<div class=" col-xs-2 col-md-2">
<img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
</div>
<div class=" col-xs-2 col-md-2">
<img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
</div>
<div class=" col-xs-2 col-md-2">
<img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
</div>
<div class=" col-xs-2 col-md-2">
<img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
</div>
<div class=" col-xs-2 col-md-2">
<img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
</div>
<div class=" col-xs-2 col-md-2">
<img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
</div>
<div class=" col-xs-2 col-md-2">
<img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
</div>
<div class=" col-xs-2 col-md-2">
<img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
</div>
<div class=" col-xs-2 col-md-2">
<img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
</div>
</div>我在大屏幕上有2排6 colum，但在iPhone 6/7/8 plus和iPhone6/7/8以及更小的设备中，我只得到一列。我不知道如何解决它，希望我的问题是清楚的:)谢谢
Stack Overflow用户
发布于 2020-10-27 00:15:53
在引导布局中，轴除以12。
您可能需要在div类属性中替换它。
class=" col-xs-4 col-sm-3 col-md-3 col-lg-2 col-xl-2"您还可以使用普通的CSS针对不同的屏幕大小。
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}对于不同设备中的最大宽度，您可以使用：
320 px-480:移动设备。
481 px-768: iPads，片剂。
769 px-1024:小屏幕，笔记本电脑。
1025 px-1200:桌面，大屏幕。
1201 TV和更多-超大屏幕，电视。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64546616
复制相关文章
相似问题
腾讯云开发者
