HTML5/CSS：根据更改页面大小更新布局？

任何人都可以指出我有关响应式网页设计的好教程/指南吗？HTML5/CSS：根据更改页面大小更新布局？

我对基础知识非常熟悉，但以下是我在寻找的内容：我已经看到了响应式网页，它不仅仅是在浏览器窗口调整大小时“流畅地”调整自己（这种响应式设计I我很熟悉，并且可以很容易地设置）。他们所做的是保持其原有的（最大的）布局，直到浏览器窗口达到一定的较小尺寸，然后将页面折叠成不同的布局，完全适应浏览器窗口的较小尺寸。此更改不仅包括布局，还包括可见项目的数量以及其他UI元素的激活，以便于在较小窗口中进行导航。

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

来源

2012-06-15 user1457366

http://stackoverflow.com/questions/8100040/how-to-dynamically-resize-webpage-layout-according-to-window-size?rq=1，http://stackoverflow.com/questions/10072991 /响应HTML的页面设计-PC-平板电脑，智能手机与 - 表或表少-FO？RQ = 1 – 2012-06-15 03:40:13

通过使用媒体查询为不同屏幕尺寸定义不同样式，可实现您所描述的贴切行为。

例如：

@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学习一下吧。

来源

2012-06-15 03:30:25 ataddeini

要添加到第一个绝对正确的答案，你也可以检查html5样板。它有一个相当不错的CSS启动器来做响应式设计。它对我有很大的帮助，嘿，如果有人已经写了它，没有意义再写一次！

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

来源

2012-06-15 21:11:33 ledgeJumper

HTML5/CSS：根据更改页面大小更新布局？

回答

相关问题