gpt4 book ai didi

html - Bootstrap 4 : what is the minimum supported screen resolution of an extra small mobile device? 上的自适应布局

转载 作者:行者123 更新时间:2023-11-28 14:29:17 24 4
gpt4 key购买 nike

Bootstrap 4文档说:

Extra small devices (portrait phones, less than 576px)

很明显,屏幕宽度小于 576 像素的设备属于超小型设备。好吧,小于 576 像素……少多少?网格不能减少到零。使用 Bootstrap 网格的布局可以压缩到没有明显设计扭曲的限制。此外,还有屏幕宽度远小于 576 像素(320 或 240 像素)的设备。

如果我们用数学方法将超小设备支持的屏幕宽度表示为一个区间,我们得到[a, b),其中b = 576 根据文档.. 那么...... a 等于什么?文档没有涵盖这个问题。

下面的代码示例中有一个自适应 header (container-fluid with row and 12 columns)。在 Chrome 的开发人员工具中,我找到了值 a = 360,这是网格尚未扭曲的最后一个值(a = 359,第 12 列不适合宽度并转到“新行”)。

当然,我可以重置填充,然后一切都适合 320 和 240 像素,但这个解决方案不是开箱即用的:

.row > div {
padding: 0;
}

360 像素真的是 Bootstrap 4 支持的最小屏幕宽度吗?

快速查看示例:

.header {
background: rgb(240,240,240);
min-height: 70px;
border-bottom: 1px solid gray;
align-items: center;
text-align: center;
}

.logo {
border: 1px dashed black;
height: 40px;
width: 100px;
display: inline-block;
}
<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
<div class="row header">
<div class="col-1">
<i class="fas fa-bars"></i>
</div>
<div class="col-9 text-center">
<div class="logo">Logo</div>
</div>
<div class="col-1">
<i class="fas fa-shopping-cart"></i>
</div>
<div class="col-1">
<i class="fas fa-search"></i>
</div>
</div>
</div>

简单复制到文本编辑器的相同代码(也许有人想查看开发工具):

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<style type="text/css">
.header {
min-height: 70px;
border-bottom: 1px solid gray;
align-items: center;
text-align: center;
}

.logo {
border: 1px dashed black;
height: 40px;
width: 100px;
display: inline-block;
}
</style>

</head>
<body>
<div class="container-fluid">
<div class="row header">
<div class="col-1">
<i class="fas fa-bars"></i>
</div>
<div class="col-9 text-center">
<div class="logo">Logo</div>
</div>
<div class="col-1">
<i class="fas fa-shopping-cart"></i>
</div>
<div class="col-1">
<i class="fas fa-search"></i>
</div>
</div>
</div>
</body>
</html>

最佳答案

没错,bootstrap 支持的最小分辨率是 240 x 320 像素。 bootstrap 的开发人员根据当前市场定义了最小宽度。现在出现的大多数功能条形电话都具有 240x320 的分辨率。但是,如果您想将代码运行到一些老式的栏中,例如分辨率为 128 x 160 的 Samsung Guru,您可以相应地自定义媒体查询。

关于html - Bootstrap 4 : what is the minimum supported screen resolution of an extra small mobile device? 上的自适应布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54323775/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com