GetSkeleton 的响应式设计：如何按媒体类型向右或向左浮动？答案

【问题标题】：Responsive design with GetSkeleton: how to float right or left by media-type?GetSkeleton 的响应式设计：如何按媒体类型向右或向左浮动？
【发布时间】：2012-01-06 00:59:28
【问题描述】：

我正在使用 Skeleton 使现有网站具有响应性，但有一件事我无法弄清楚。

<div class="sixteen columns">
<div class="ten columns alpha">HEADER</div>
<div class="six columns omega" style="float:right;">search box</div>
</div>

如果两列彼此相邻，这看起来不错，如下所示：

| HEADER                      search box |

但是如果屏幕更小并且列垂直堆叠，它可以堆叠但浮动看起来不太好：

| HEADER              |
|          search box |

列堆叠时如何让搜索框向左浮动？

是否需要使用 Skeleton 的媒体类型修改搜索框的浮动样式？

感谢您的帮助。

【问题讨论】：

标签： html css responsive-design

【解决方案1】：

是否需要使用 [media queries] 修改搜索框的浮动样式？

是的。 :-)

 @media only screen and (max-width: 479px) {
      .search-box{
           float:left;
      }
 }

【讨论】：

【解决方案2】：

您可以使用简单的媒体查询来实现：

@media screen and (max-width: 200px) {
  .omega{
     float:left;
  }
}

max-width 表示，当视口小于时，应用更新后的样式。您也可以使用min-width，它的工作原理与此大致相同，但它意味着大于，并且一旦视口大于宽度，就会应用该样式。

【讨论】：