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

Question

我正在使用 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 的媒体类型修改搜索框的浮动样式？

谢谢你的帮助。

score 2 · Accepted Answer

我是否需要使用 [媒体查询] 修改搜索框的浮动样式？

是的。:-)

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

score 0 · Accepted Answer

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

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

max-width意味着，当视口小于然后应用更新的样式。您也可以使用min-widthwhich 以相同的方式工作，但它意味着大于，并且一旦视口大于宽度，就会应用该样式。

2 回答 2