css - 居中布局无响应

Question

我正在开发一个具有居中布局的网站，即一个 3 列网格，其中网站内容位于中间列（50%），左侧和右侧有 25% 的空列。

到目前为止，它在全尺寸浏览器中看起来相当不错。但是，如果我减小浏览器窗口的大小（或使用移动视口），则 25% 的列仍可使用空间。在较小的环境中，25% 的列是否有可能逐渐将其大小减小到零？

还是网格方法不好？

标签： css

Answer 1

试试@media ( Mozilla CSS - media )。

@media (min-width: 576px) {
  .col1 {...}
  .col2 {...}
  .col3 {...}
}

@media (min-width: 768px) {
  .col1 {...}
  .col2 {...}
  .col3 {...}
}