转动带有很多边距的CSS＆amp;填充到响应式设计中

Question

我是编码的新手，我创建了一个包含大量边距和填充值的网站。那么有一种合理的方式可以使其响应吗？

Answer 1

在制作响应式网站时，保证金和填充不应该真正重要。为了使网站响应，一个重要的事情就是努力使网站宽度达到百分比。此外，找到一个好的框架可以帮助很多。我建议你研究一下bootstrap或者基础。

http://getbootstrap.com/css/#overview

Answer 2

您需要在Bootstrap断点中应用新的边距和填充。 只选择你需要的那个。

一些提示如何减少响应代码的数量：

• 使用一个类名以相同方式调整大小的组元素，然后仅为同一类名的组应用新大小。
• 为列添加自适应大小，例如col-xs-12，col-sm-6，col-md-4
• 如果您不必要，请不要为每个断点重新设置所有元素的样式。检查一个网站在大屏幕上是否看起来不错，然后调整浏览器大小并重新设置这些在较小屏幕上打破的元素。
• 将断点数减少到最少，例如：1。移动设备，2。平板电脑，3。桌面。

的CSS：

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {

}