2

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

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

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

4

2 回答 2

3

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

例如：

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

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

这是开始学习它的好地方。

于 2012-06-15T03:30:25.597 回答
0

要添加到第一个绝对正确的答案，您还可以查看 html5 样板。它有一个非常好的 CSS 启动器，用于进行响应式设计。它对我帮助很大，嘿，如果有人已经写过，再写也没有意义！

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

于 2012-06-15T21:11:33.753 回答