Chris Coyier

我们从打开 Photoshop 文件开始。这个看起来有点滑稽的“拉长”的 iPhone 屏幕截图，它只是在移动优先的上下文中为我们提供了一个画布。

我们从最简单的事情开始：Jeff 的名字。我们需要……

信用卡号码、有效期和 CVV 都是数字，所以为什么不把它们都收集在一个字段中，并一直保持数字键盘打开呢？好主意，Zachary Forrest。来自 Luke。

相关：如果你使用 Stripe，……

如果你在 Google 上搜索是否应该使用列表作为网站导航的标记，你不会发现任何争论。每篇文章都建议你应该这样做。你阅读的大多数教程都会使用列表……

从上一个视频中，我们知道在开始设计这个网站时需要考虑五个主要方面。在接下来的过程中，我们会牢记这些要点。

当然，我们首先从“移动优先”开始，……

在这个屏幕录制中，我谈到了 Jeff 第一次给我发邮件，希望重新设计网站时，我和他之间的沟通情况。

Jeff 的总体感觉是“是时候了”。是时候重新设计网站了。……

在这个屏幕录制中，我们查看了 Jeff 现有的网站。这个系列不像 v10 系列那样专注于“重新设计”，但这里确实存在一个现有的网站，我们将使用其中的一些现有内容。……

大家好！欢迎来到使用 WordPress 构建移动优先艺术家网站的完整系列课程。这与我们之前录制构建过程的系列略有不同。在本课程中，“最终”网站已构建完成：JeffCampana.com……

使用 WordPress 作为 CMS，从移动优先的角度设计艺术家网站的完整过程。……

(function() {
  if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
    var msViewportStyle = document.createElement("style");
    msViewportStyle.appendChild(
      document.createTextNode("@-ms-viewport{width:auto!important}")
    );
    document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
  }
})();

简要背景

为了让 IE 10（桌面版）在其新的“捕捉模式”下工作，你需要使用这个

@-ms-viewport {
  width: device-width;
}

但是……