使填充响应式

Question

我刚开始使用Bootstrap，并且对前端开发还是个新手。我现在遇到了一个关于padding的问题，因为它在桌面和移动设备上大小保持不变。

HTML代码：

  <div class="container" id="i-container">
        <h3>We possess high quality products &mdash; therefore our customers are always loyal</h3>
  </div>

CSS 代码：

  #i-container{
        border: solid;
        border-color: rosybrown;
        padding-left: 150px
        padding-top: 10px;
    }

正如我之前所提到的，在移动设备中填充保持不变（似乎不具有响应性）。顺便说一下，我也尝试使用em，但它也没有起到作用。

- Anon Ymous

---

如果您使用像素作为大小，它们将始终保持相同的大小。如果您希望其更改，可以使用％、vw或媒体查询。 - Sergio Tx

Answer 1

在制作响应式网站时，请使用百分比作为度量单位。如果您想让网站响应式，像素不起作用。如果使用百分比，则度量是相对于屏幕大小进行的。但如果使用像素，则填充对于所有大小都保持不变。简单地说，按照下面所示更改您的CSS：

#i-container{
        border: solid;
        border-color: rosybrown;
        padding-left: 12%;
        padding-top: 0.5%;
    }

使用您所需的百分比。

- Pragyakar

Answer 2

CSS中有一些与视口（即浏览器窗口的大小）相关的值，用于调整元素的大小。其中一个单位是视口轴的1％。这些值对于响应式设计非常有用，即在不同屏幕尺寸上设计网站，充分利用可用的空间。

padding: 1vw // 1% of viewport width
padding: 1vh // 1% of viewport height
padding: 1vmin // 1vw or 1vh, whichever is smaller
padding: 1vmax // 1vw or 1vh, whichever is larger

你也可以使用Bootstrap提供的基于网格的布局。

- Shuaib Abubakker Bapputty Haji

Answer 3

由于我们不知道你要创建什么，以及你期望的结果是什么，因此编写任何具体内容都非常困难。

话虽如此：无论您从哪个设备打开网站，像素都将是像素。因此，在元素上设置固定大小通常会导致元素超出可见区域等类似问题。这可能就是你所遇到的问题。使用像素设置填充，将保持完全相同的填充量，而不管使用哪个设备打开网站。

但是，你提到了Bootstrap，它有一个相当好的网格系统，可以独立于设备工作。他们使用媒体查询来控制设备和布局，具体来说，他们使用.col-xs-（小于768px），.col-sm-（大于或等于768px），.col-md-（大于或等于992px），.col-lg-（大于或等于1170px）。这意味着你可以将你的内容放置在组和行中，你可以完全控制它们在不同屏幕尺寸下的呈现和位置。

因此，对于您的项目，并且为了更好地控制布局和位置，我建议您在这里查看网格系统。

- chrisv