HTML5/CSS：根据页面大小的变化更新布局？答案

【问题标题】：HTML5/CSS: update layout according to changing page size?HTML5/CSS：根据页面大小的变化更新布局？
【发布时间】：2012-06-15 03:24:47
【问题描述】：

谁能给我一个关于响应式网页设计的好教程/指南？

我对基础知识非常熟悉，但这里是我特别要寻找的：我看到响应式网页不仅会在调整浏览器窗口大小时“流畅地”调整自己（这种响应式设计我是足够熟悉并且可以轻松设置）。相反，他们所做的是保持原来的（也就是最大的）布局，直到浏览器窗口达到某个较小的尺寸，然后页面捕捉到不同的布局，完美地适应浏览器窗口的较小尺寸。此更改不仅包括布局，还包括可见项目的数量以及激活其他 UI 元素以使在较小窗口中的导航更容易。

想象一下纸牌在橱窗里并排放置。让我们假设当窗口处于全屏模式时 5 张卡片彼此相邻。现在想象窗口的尺寸减小了。布局保持不变，直到第一张和最后一张卡片几乎超出可见区域。当窗口达到那个大小时，页面“捕捉”到不同的布局，现在只在中心显示 3 张卡片，左右边缘出现箭头，表示用户可以滚动到更多卡片。这种响应式设计是如何完成的？

【问题讨论】：

stackoverflow.com/questions/8100040/… , stackoverflow.com/questions/10072991/…

标签： css html layout responsive-design

【解决方案1】：

您所描述的对齐行为是通过使用媒体查询为不同的屏幕尺寸定义不同的样式来实现的。

例如：

@media screen and (min-width: 480px) {
    .nav {
        float: none;
    }
}

@media screen and (min-width: 620px) { 
    .nav {
        float: left;
    }
}

Here's a good place to start了解一下。

【讨论】：

【解决方案2】：

要添加到第一个绝对正确的答案，您还可以查看 html5 样板。它有一个很好的 css starter 来做响应式设计。它对我帮助很大，嘿，如果有人已经写过，再写也没用！

我通常去http://www.initializr.com/ 并从那里获取响应式模板。

【讨论】：