响应式网页的“首屏之上”

这篇文章的标题不仅仅是试图用 SEO 填充内容，它也是对蜜蜂大会的蒙眼剪刀脚攻击！在网页制作领域，很少有主题能像“首屏”和“响应式网页设计”那样快速地让极客热血沸腾，所以现在是时候将这两者结合起来，让这台服务器在巨量的巨魔分享他们对我的个人看法时不堪重负了。

在 Webby 颁发“最佳幼稚使用奖”之前，我想指出，多年来我一直是“首屏已死”阵营的一员。没有什么比将网站与滚动隐喻的来源——纸莎草卷——进行比较更能让我高兴的了（当我还能用字体来开玩笑时，还能获得额外的积分）。“当然，当抄写员想要避免滚动时，他们可能会在幸运饼干纸上写信，对吧？”（客户可能很喜欢讽刺）。然而，最近我不得不承认，也许我应该更加包容首屏支持者，而不是简单地用我的一袋旧鼠标滚轮击打他们的头。

最近，谷歌（顺便说一句，这家公司的简洁的“首屏之上”网站仅仅是通往大量滚动搜索结果的入口）添加了一个新功能 到他们的 Google Analytics 套件中，允许您查看使用什么尺寸浏览器访问您网站的用户。这让我不再假装来自用户显示器分辨率的数据实际上意味着什么相关内容，并开始更多地了解用户浏览我网站的方式。

Google Analytics 是一款有用的工具，它可以做的不仅仅是粉碎你对人类升级网页浏览器能力的信心。这个工具可以直观地告诉你你的网站是如何被使用的。你可以轻松地看到谁在滚动和点击你辛苦设计的那些闪亮的按钮，即使它们被多次出现的“Ask Jeeves” 工具栏. 它会直观地显示你滚动和点击各个链接的百分比！

这个新的分析工具让我开始重新思考首屏。我以前认为首屏是落伍用户的弱点或障碍，但这是我第一次发现首屏对像我（一个精明的网站管理员）这样的人如何浏览网页有着巨大的影响。我不得不承认自己会弹跳很多（Google Analytics 可能认为我的注意力跨度和金鱼一样）。如果我不能立即看到我想要的东西，或者如果我认为这个网站看起来像老鼠建造的，我通常会在到达网站后的第一秒钟内做出离开网站的决定。通过封面来评判书籍和网站通常不会造成伤害，直到缺乏结果让我回到同一页面，更加仔细地查看，却发现所要的内容洋洋得意地坐在首屏之下。

入门

新的浏览器尺寸分析功能已经存在了足够长的时间，现在你可以看到一些关于你当前网站设计如何应对像我这样的没有耐心的人的真实数据！你会看到很多用户没有使用全屏浏览器。虽然这对 Mac 用户来说一直都是真的（大多数人会苦涩地说，他们更喜欢自己的窗口更小，因为他们无法弄清楚那个 UI “+”按钮的作用），但事实证明，许多 PC 用户可能也不使用全屏浏览器（可能想在上述 Mac 用户面前显得酷）。

我猜想报告的结果会让你想要做两件事中的一件：在昏暗的偏远地区亲自面对每个用户，质问他们可疑的计算机习惯，或者让你想要微调你的设计。后者是使用方便的垂直响应式网页设计的地方（对于前者，我建议你用一袋旧鼠标滚轮）。

垂直响应式网页设计

在过去几年里，我们一直在像兴奋的手风琴演奏者一样调整显示器宽度，以便更好地理解 RWD。这些背后的魔力是现在很常见的媒体查询

@media screen and (min-width: 768px) {  
  marquee { font-size: 43em; }
}

开始使用垂直 RWD 只是解决高度的问题。很简单。

@media screen and (min-height: 768px) {  
  blink { color: pink; }
}

我想做几个实用的垂直响应式演示，让大家激动和兴奋！

示例 #1：更柔软、更挤的首屏

垂直 RWD 最明显的用途是将你最重要的号召性用语保持在首屏之上。为了让这个示例更加有趣，我选择在一个现有的水平响应式布局上进行操作，这个布局来自 Twitter Bootstrap。在两个轴上都具有响应性非常有趣，也是制作一些混乱代码的好机会，如果你喜欢这种方式的话。

当你在桌面上垂直调整这个演示网站的大小，我决定我想尽可能地让这四个按钮都可见（希望普通的网站只有一个关键的 CTA）。对于移动尺寸，我只要求蓝色的 CTA 按钮保持可见。对于这个演示，我决定不担心低于 320 像素的屏幕。实际上，这应该涵盖极小的桌面用户和移动用户。我们应该能够以我们通常为 IE6 用户保留的语气来讨论具有更小视窗的用户。

使用这个 Twitter Bootstrap 布局，有四个水平断点——除了最后一个（当下面三列堆叠时），我能够让我的按钮保持可见。这一切都是通过一些媒体查询完成的，你可以在文档源代码底部的<style>块中找到它们。

总的来说，将这个布局改造为以这种方式工作非常简单（他说得很有信心，尽管故意选择了一个在首屏之上缺乏媒体的布局），尤其是通过借鉴现有的水平断点。

当然，我们还需要解决房间里那只丑陋的大象，它基本上就像一个不受欢迎的占地者一样住在这里：我们应该如何处理旧版本的 Internet Explorer？有一个很棒的小型 JavaScript 库叫做 CSS3MediaQueries.js，它能很好地完成这项工作。我已将它包含在这个演示中，使用条件 IE 标签。虽然它不像现代浏览器那样流畅地调整大小，但在页面加载时，用户会看到布局的响应版本。美观。

Twitter Bootstrap 演示

查看演示

示例 #2：WordPress 仪表板导航调整

这个示例很简单：一个非常小的媒体查询，使用一个简单的 CSS 代码，完全改变了所有 WordPress 管理员都熟悉的通常是相对定位的左侧导航

@media screen and (min-height: 500px) {  
  #adminmenuwrap { position: fixed; } 
}

现在，无论导航是处于折叠状态还是新手模式（我开玩笑），只要你的垂直分辨率高于 500 像素，当你滚动查看较长的页面时，它都会保持可见。如果你的浏览器低于那个尺寸，它会回到一个相对定位的元素，它会随着网站的其他部分一起滚动。我选择 500 像素，这足以容纳标准菜单，以及插件或主题中的一些额外的菜单项。

这种垂直方向的 RWD 定位处理非常适合导航、小部件、猫的图片、页面工具，甚至可爱的广告，就像这个网站迷人赞助商提供的广告一样！

为了这个概念证明，我创建了 WordPress 仪表板的本地化 HTML 版本（所有链接都已损坏，只是演示滚动效果）

WordPress 仪表板演示（仅媒体查询）

查看演示

我示例中使用的 500 像素只在你了解元素所需的最大高度时才有效。但是，如果该对象的的高度不可知或会发生变化（例如具有多个级别的折叠式导航），你可能需要考虑使用一些 jQuery 代码，该代码会将对象的的高度与窗口的高度进行比较。

我在以下演示的变体中完成了这项工作，通过调用 jQuery 并使用此脚本

var setResponsive = function () {

  // Is the window taller than the #adminmenuwrap by 50px or more?
  if ($(window).height() > $("#adminmenuwrap").height() + 50) {

     // ...if so, make the #adminmenuwrap fixed
     $('#adminmenuwrap').css('position', 'fixed'); 
    
  } else {
       
     //...otherwise, leave it relative        
     $('#adminmenuwrap').css('position', 'relative'); 

  }

}

$(window).resize(setResponsive);
setResponsive();

WordPress 仪表板演示（使用 jQuery）

查看演示

一个高要求

就是这样。

一个小小的免责声明：在这篇文章中，我一直使用“垂直响应式网页设计”这个短语——请理解，我只是在指定响应性的方向，而不是创造一个新短语。无论响应是垂直的还是水平的，“响应式网页设计”这个词都涵盖了所有内容。

我认为我们可以从最佳实践、内容和用户角度，在垂直响应式网页设计方面做得更多。这款 Google Analytics 新工具的出现让现在成了开始行动的绝佳时机。过去，这些狡猾的短浏览器用户可能难以捉摸，甚至让人沮丧到让伯纳斯-李想踢小猫，但现在我们可以从他们的行为中学习，并预测他们查看重要内容的常见方式。

好消息，我的朋友们，折叠不再是问题了。