使填充响应

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%;
    }

使用您想要的百分比。

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

Answer 3

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

话虽如此:无论你从什么设备打开网站，像素都是像素。因此，在元素上设置固定的大小通常会导致元素超出可见区域等。这可能就是你正在经历的。设置填充像素，无论使用什么设备打开站点，都会保持相同的填充量。

但是你提到Bootstrap，它有很好的网格系统，可以独立于设备工作。他们使用媒体查询来保持对设备和布局的控制。具体来说，他们使用.col-xs-(小于768px)， .col-sm-(大于或等于768px)， .col-md-(大于或等于992px)， .col-lg-(大于或等于1170px)。这意味着你可以把你的内容放在组和行，在那里你可以保持完全控制它们如何呈现和放置在不同的屏幕尺寸。

所以对于你的项目，为了更好地控制布局和位置，我建议你看看这里的网格系统。