css - HTML5/CSS : update layout according to changing page size?

Question

谁能给我指出有关响应式网页设计的优秀教程/指南？

我非常熟悉基础知识，但这是我特别要寻找的东西:我看到响应式网页不会随着浏览器窗口的大小调整而“流畅地” self 调整(我就是这种响应式设计足够熟悉并可以轻松设置)。相反，他们所做的是保持其原始(又名最大)布局，直到浏览器窗口达到一定的较小尺寸，然后页面突然变成不同的布局，完美地适应浏览器窗口的较小尺寸。此更改不仅包括布局，还包括可见元素的数量以及额外 UI 元素的激活，以便更轻松地在较小的窗口中导航。

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

Answer 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了解它。