html - 使填充响应

Question

我刚开始使用 Bootstrap，一般来说我是前端开发的新手。我遇到了填充问题，因为它在桌面和移动设备上保持相同的大小。

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

Answer 1

在使您的网站响应迅速时使用百分比作为衡量单位。如果您希望 Pixels 具有响应性，则它不起作用。如果您使用百分比，则将根据屏幕尺寸进行测量。但是，如果您使用像素，则所有尺寸的内边距都保持不变。只需按如下所示更改您的 CSS:

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

使用您想要的百分比。