Html 使填充响应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39321053/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make padding responsive
提问by Anon Ymous
I just started using Bootstrap, and I'm new in front-end development in general. I'm having a problem with padding, since it remains the same size in desktop and mobile devices.
我刚开始使用 Bootstrap，一般来说我是前端开发的新手。我遇到了填充问题，因为它在台式机和移动设备中保持相同的大小。
HTML code:
HTML代码：
<div class="container" id="i-container">
<h3>We possess high quality products — therefore our customers are always loyal</h3>
</div>
CSS code:
CSS代码：
#i-container{
border: solid;
border-color: rosybrown;
padding-left: 150px
padding-top: 10px;
}
As I mentioned above, in mobile devices the padding remains the same (it doesn't seem to be responsive). I tried using emtoo, by the way. It doesn't help either.
正如我上面提到的，在移动设备中，填充保持不变（它似乎没有响应）。顺便说一下，我也尝试使用em。它也没有帮助。
回答by Pragyakar
Use percentage as a unit of measurement while making your website responsive. Pixels does not work if you want it to be responsive. If you use percentage, the measurement is taken with respect to the size of the screen. But if you use pixels, the padding remains the same for all sizes. Simply, alter your CSS as shown below:
使用百分比作为衡量单位，同时使您的网站具有响应性。如果您希望它具有响应性，则像素不起作用。如果使用百分比，则根据屏幕尺寸进行测量。但是，如果您使用像素，则所有尺寸的填充都保持不变。简单地，改变你的 CSS，如下所示：
#i-container{
border: solid;
border-color: rosybrown;
padding-left: 12%;
padding-top: 0.5%;
}
Use your desired percentage.
使用您想要的百分比。
回答by chrisv
Since we don't know what you want to create, and what result you're looking for, it's pretty difficult writing anything specific.
由于我们不知道您想要创建什么，以及您正在寻找什么结果，因此很难编写任何特定的内容。
With that said: pixels will be pixels no matter the device you're opening the site from. So setting a fixed size on elements will often result in elements going outside of visible area and similar. That's probably what you're experiencing. Setting the padding with pixels, will keep exactly that amount of padding no matter what device used to open the site.
话虽如此：无论您打开网站的设备是什么，像素都将是像素。因此，在元素上设置固定大小通常会导致元素超出可见区域等。这大概就是你正在经历的。使用像素设置填充，无论使用什么设备打开网站，都将保持精确的填充量。
BUT you mention Bootstrap, which have quite good grid system that works device independent. They use media queries to keep control of device and layout. Specifically are they using .col-xs-(less than 768px), .col-sm-(greater than or equal to 768px), .col-md-(greater than or equal to 992px), .col-lg-(greater than or equal to 1170px). That means you can place your content in groups and rows, where you can keep full control of how they are rendered and placed on different screen sizes.
但是你提到了 Bootstrap，它有很好的网格系统，可以独立于设备工作。他们使用媒体查询来控制设备和布局。具体是他们使用.col-xs-（小于768px），.col-sm-（大于等于768px），.col-md-（大于等于992px），.col-lg-（大于等于1170px）。这意味着您可以按组和行放置内容，您可以完全控制它们在不同屏幕尺寸上的呈现和放置方式。
So for your project, and for better control of layout and placement, I would recommend you take a look at the grid system HERE.
因此，对于您的项目，以及为了更好地控制布局和放置，我建议您在此处查看网格系统。
