填充响应

Question

我刚刚开始使用Bootstrap，而且我在前端开发方面一般都是新手。我有填充问题，因为它在桌面和移动设备中保持相同的大小。

HTML code：

  <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 。它也没有帮助。

Answer 1

使用百分比作为度量单位，同时使您的网站响应。如果您希望像素具有响应性，则像素不起作用。如果使用百分比，则会根据屏幕大小进行测量。但是如果使用像素，则所有尺寸的填充都保持不变。简单地说，改变你的CSS，如下所示：

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

使用您想要的百分比。

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

您还可以从引导程序使用基于网格的布局

Answer 3

由于我们不知道您想要创建什么，以及您正在寻找什么结果，因此编写任何特定内容都非常困难。

话虽如此：无论你打开网站的设备，像素都是像素。因此，在元素上设置固定大小通常会导致元素超出可见区域并且类似。这可能是您正在经历的事情。无论使用何种设备打开网站，使用像素设置填充都将保留准确的填充量。

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

因此，对于您的项目，为了更好地控制布局和布局，我建议您查看网格系统HERE。