响应式行的基础

【问题标题】：Foundation for responsive rows响应式行的基础
【发布时间】：2013-11-17 17:12:59
【问题描述】：

我有一个关于响应式设计的小问题。

列的流体网格令人惊叹。但是，是否有任何行的网格系统？比如我想要一个大屏有margin-top但小屏没有的盒子，我该怎么做呢？

【问题讨论】：

【解决方案1】：

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

CSS：

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

加上一些transition 会更好看。 (DEMO)

【讨论】：

【解决方案2】：

您正在寻找一种叫做媒体查询的东西。它允许您指定 CSS，但前提是浏览器视口小于（或大于）指定大小。根据src，小屏在小于768px时触发。因此，您要求的规则可能如下所示：

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

【讨论】：