响应行的基础

Question

关于响应式设计，我有一个可能微不足道的问题。

柱子的流体网格是惊人的。但是，行是否有任何网格系统？例如，如果我想要一个大屏幕中有margin-top但没有小屏幕的框，我该怎么做？

Answer 1

您正在寻找称为媒体查询的内容。它允许您指定CSS，但仅限于浏览器视口小于（或大于）指定大小。根据{{​​3}}，小屏幕的触发频率低于768px。因此，您要求的规则可能如下：

<style>
  @media (max-width: 768px) {
    .row {
      margin-top:0
    }
  }
</style>

Answer 2

你可以使用媒体查询，例如你想要的就在这里：

jsFiddle

<强> CSS：

div{
    width:100%;
    height:50px;
    background:#ddd;
    margin-top:0px;
}
@media (min-width: 500px) {
  div{
    margin-top:100px;
  }
}

有些transition会更好看。 （DEMO）