假设我有一个简单的 html (+css) 页面,其中包含页眉、下方(左右)两个 div 和下方的页脚。调整窗口大小时,我想让右 div 低于左 div。我有两个这种效果的例子:
示例 #1 - 这是一个简单的示例,但它是我所想的 100%,这是另一个更复杂但也很好的示例: 示例 #2
这个效果怎么称呼?我需要 JavaScript 来制作它吗?
这种效果称为响应式网页设计,它使用媒体查询来定位特定的设备尺寸。
您可以通过观看这些介绍视频了解有关如何使用和处理媒体查询的更多信息:
https://www.youtube.com/watch?v=TPmb7xHCLO0
https://www.youtube.com/watch?v=F_fhyXUH_To
此外,这是一篇很棒的文章,可以为您节省大量时间和挫败感:
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Twitter 为响应式 html 设计制作了这个很棒的框架:http: //getbootstrap.com/ 它使用起来非常简单,节省了大量工作。