创建移动优先的响应式网页设计

Question

我们将介绍如何创建以移动为先的自适应 Web 体验。 本文和 演示 将讨论以下内容：

关于我们的新产品，还有更多最新的响应式指南 Web 基础知识 站点。

• 为什么我们需要创建移动优先、响应式、自适应的体验
• 如何为自适应站点构建 HTML 以优化性能并优先考虑灵活性
• 如何首先编写定义共享样式的 CSS，使用媒体查询为更大的屏幕构建样式，并使用相对单位
• 如何编写不显眼的 JavaScript 以有条件地加载内容片段，利用触摸事件和地理定位
• 我们可以做些什么来进一步增强我们的适应性体验

适应性的需要

随着 Web 环境变得越来越复杂，为越来越多的上下文提供可靠的 Web 体验变得极其重要。 值得庆幸的是， 响应式网页设计 为网页创建者提供了一些工具来制作响应任何屏幕尺寸的布局。 无论设备的屏幕尺寸如何，我们都将使用流体网格、灵活的图像和媒体查询来使布局看起来很棒。

然而，移动环境不仅仅是屏幕尺寸。 无论我们走到哪里，我们的移动设备都伴随着我们，解锁全新的用例。 因为我们经常随身携带移动设备，所以连接可以无处不在，从沙发上的强大 Wi-Fi 信号到外出时的 3G 或 EDGE。 此外，触摸屏开辟了直接与内容交互的新机会，移动人体工程学导致在设计布局和功能时需要考虑不同的因素。

为了创建一个真正为移动环境而不仅仅是小屏幕设计的网站，我们希望确保我们能够提前解决移动开发的许多挑战。 移动环境的限制迫使我们关注哪些内容是必不可少的，以及如何尽快呈现这些内容。 构建快速加载、优化的体验 移动优先 对平板电脑、台式机和其他新兴环境具有涓滴效应（或向上，取决于你如何看待它）。

我们在做什么：不起眼的产品详细信息页面

查看演示

我们正在制作的演示是一个简单的电子商务产品详细信息页面，适用于一家虚构的 T 恤公司。 为什么选择这个？ 电子商务网站可以有许多跨上下文的用例。 例如， 70% 的智能手机用户使用他们的手机来影响店内购买 。 因此，虽然我们将确保购买产品尽可能简单，但我们还将尝试使产品评论易于访问，并利用用户的位置来增强移动体验。

结构

编写精简、语义化的 HTML5 标记可保持自适应体验的可管理性和可访问性，并为增强体验提供机会（快速示例：使用 正确的 HTML5 输入类型 在许多触摸设备上带来适当的虚拟键盘）。 语义标记非常便携，可以被许多移动设备、平板电脑、桌面浏览器和未来支持网络的设备访问，无论功能集或功能如何。

设置视口

为了适应未针对移动屏幕优化的站点，许多现代移动浏览器设置了更大的浏览器视口，以便更好地查看非移动优化站点。 然后用户可以捏合放大他们想要的内容。 这对于非移动体验来说很好，但因为我们正在优化移动浏览器的体验，我们将使用 视口元标记 将屏幕宽度设置为设备宽度：

<meta name="viewport" content="width=device-width, initial-scale=1" />

重要的是要注意，即使我们正在针对小屏幕优化内容，我们也不会禁用用户缩放页面的能力（您可以通过将 user-scalable=no 添加到内容属性来实现）。 建议保持启用用户缩放功能，以便尽可能地访问内容。 但是，有些用例可以禁用用户缩放，例如如果您包含 固定定位的元素 。

内容片段

为了保持尽可能轻量级的体验并改善感知加载时间，我们为辅助内容创建了两个额外的 HTML 文档，reviews.html 和related.html。 由于此内容不是主要用例（购买产品）所必需的，并且包含大量图像，因此默认情况下我们不会加载它以保持初始页面大小较小。 默认情况下，内容可通过页面上的链接访问，但如果存在一定级别的 javascript 支持，我们将 有条件地加载内容 在用户请求或分辨率达到某个断点时 。

HTML 特殊字符

减少背景图像需求（从而节省 HTTP 请求）的一种简单技术是对简单形状使用 HTML 特殊字符。 就我们的评级星级而言，我们使用的是 ★ 创造一个坚实的明星（★）和☆ 为我们的评分创建空星 (☆)。 由于它是 HTML 而非图像，因此即使在高分辨率屏幕上也能保持清晰。

电话：URI 方案

我们在页脚中包含的另一个简单而有效的技术是指向客户服务号码的可点击链接。 这是通过使用 tel URI 方案来完成的，它看起来像这样：

<a href="tel:+18005550199">1-800-555-0199</a>

我们有时会忘记 移动设备可以拨打电话 ，而且某些桌面配置可以启动 VoIP 应用程序来发起电话呼叫。 我们为用户提供了一种方便用户拨打电话的简单方法，这在某些情况下可能是有意义的（即，移动用户可能更喜欢通过电话完成交易而不是在他们的移动设备上完成结账流程）。

现在我们已经有了一个强大的语义基础，让我们继续添加样式增强。

风格

在制作我们的 CSS 时，我们将尽一切努力使事物保持轻量级和尽可能流畅。 我们知道所有这些设备都有许多不同的屏幕尺寸，并且未来的设备将不会具有与今天相同的分辨率。 因为屏幕尺寸是未知的，我们将使用内容本身来确定布局应该如何适应其容器。

用于大屏幕的单独样式表

我们正在创建两个单独的 CSS 文件 style.css 和 Enhanced.css，以便为小于 40.5em 的屏幕提供基本样式，并使用媒体查询为大于 40.5em 的屏幕提供增强的样式。

<link rel="stylesheet" type="text/css" href="style.css" media="screen, handheld" />
<link rel="stylesheet" type="text/css" href="enhanced.css" media="screen  and (min-width: 40.5em)" />
<!--[if (lt IE 9)&(!IEMobile)]>
<link rel="stylesheet" type="text/css" href="enhanced.css" />
<![endif]-->

我们正在使用条件代码 <!–[if (lt IE 9)&(!IEMobile)]> 以便为 IE 低于版本 9 的非移动版本提供 Enhanced.css，不幸的是不支持媒体查询。 虽然此方法确实向混合中添加了 HTTP 请求，但它 为我们的样式提供了更大的灵活性 。 或者，我们可以使用 respond.js 向 IE 提供增强的样式。

我们使用 em 单位而不是 px 来保持与其他相对单位的一致性，并考虑用户设置，例如缩放级别。 此外，内容应该确定断点（我们使用 40.5em 作为断点），因为设备尺寸变化太大并且总是在变化，因此 不可靠 。

移动优先风格

从基线共享样式开始，并在屏幕尺寸允许的情况下引入更高级的布局规则，使代码更简单、更小、更易于维护。 这里只是一个简单的例子来证明这一点：

/*Large screen styles first - Avoid*/
.product-img {
  width: 50%;
  float: left;
}
@media screen and (max-width: 40.5em) {
  .product-img {
    width: auto;
    float: none;
  }
}

我们希望尽可能地避免复杂性，因此移动优先方法如下所示：

@media screen and (min-width: 40.5em) {
  .product-img {
    width: 50%;
    float: left;
  }
}

我们不会首先声明大屏幕规则以覆盖小屏幕的规则，而是在更多可用空间可用时简单地定义规则。 默认情况下，网络是一个流动的东西，所以我们将尽最大努力使用它而不是反对它。 需要注意的是，某些移动浏览器（Symbian 浏览器、Blackberry <OS 6.0、Netfront、WP7 pre-Mango 等）不支持媒体查询，因此默认情况下为更多设备和浏览器提供基本样式服务。 正如 Bryan Rieger 所说 ，“不支持 @media 查询实际上是第一个 @media 查询。”

应用媒体查询

当我们应用媒体查询时，我们将继续我们的移动优先风格。 我们的相关产品列表从两排开始，但在屏幕尺寸至少为28.75em宽（大致为手机横屏尺寸）时增加到3排，然后当屏幕尺寸变大时增加到6排至少为 40.5em（大约为纵向模式的平板电脑或小桌面屏幕）。

/*Default styles*/
.related-products li {
  float: left;
  width: 50%;
}

/*Display 3 per row for medium displays (like mobile phones in landscape or smaller tablets)*/
@media screen and (min-width: 28.75em) {
  .related-products li {
    width: 33.3333333%;
  }
}
/*Display 6 to a row for large displays (like medium tablets and up) */
@media screen and min-width: 40.5em) {
  .related-products li {
    width: 16.6666667%;
  }
}

假设默认小屏幕允许我们支持更多平台，并且还可以轻松添加更多断点而无需修改现有样式。 根据需要定义样式还可以减小文件大小、降低复杂性并使代码更易于维护。

使用相对单位

我们在设计中使用百分比和 em 单位，以保持尽可能灵活。 相对单位与屏幕尺寸、像素密度和缩放级别带来的巨大差异更加兼容。

虽然媒体查询是响应式网页设计的秘诀，但我们希望我们的 流体网格 完成大部分工作。 在许多媒体查询中维护大量的 set-width 样式可能变得笨拙，因此我们将确保样式表的基础是完全灵活的。 Ethan Marcotte 提供了 的公式 将尺寸和字体大小从基于像素转换为相对单位 ：

target ÷ context = result

使用 CSS 减少请求

过多的 HTTP 请求可能是 的 性能 巨大杀手 ，尤其是在移动设备上。 我们正在合并一些 CSS 技术来保存 HTTP 请求，这将提高站点的性能。 使用 CSS 渐变 代替背景图像可以减少图像请求的数量，并使我们能够更好地控制设计。 我们正在包括适当的供应商前缀以确保最大的兼容性（有用于此的 工具 ）并希望有一天这些规则能够标准化以节省我们一些时间。

/*Using CSS gradients instead of background images*/
header[role="banner"] {
  position: relative;
  background: #111; 
  background: +linear-gradient (top, #111 0%, #222 100%);
}

我们还在 使用 data URLs 一些较小的图标（例如搜索、社交功能和位置的图标）中 而不是背景图像。 虽然数据 URI 可能看起来有点难看并且会增加样式表文件的大小，但请求的减少会导致 更快的下载时间 。

/*Using a Data URI for Background Image*/
.find-nearby {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAADHmlDQ1BJQ0MgUHJvZmlsZQAAeAGFVN9r01AU/tplnbDhizpnEQk+aJFuZFN0Q5y2a1e6zVrqNrchSJumbVyaxiTtfrAH2YtvOsV38Qc++QcM2YNve5INxhRh+KyIIkz2IrOemzRNJ1MDufe73/nuOSfn5F6g+XFa0xQvDxRVU0/FwvzE5BTf8gFeHEMr/GhNi4YWSiZHQA/Tsnnvs/MOHsZsdO5v36v+Y9WalQwR8BwgvpQ1xCLhWaBpXNR0E+DWie+dMTXCzUxzWKcECR9nOG9jgeGMjSOWZjQ1QJoJwgfFQjpLuEA4mGng8w3YzoEU5CcmqZIuizyrRVIv5WRFsgz28B9zg/JfsKiU6Zut5xCNbZoZTtF8it4fOX1wjOYA1cE/Xxi9QbidcFg246M1fkLNJK4RJr3n7nRpmO1lmpdZKRIlHCS8YlSuM2xp5gsDiZrm0+30UJKwnzS/NDNZ8+PtUJUE6zHF9fZLRvS6vdfbkZMh3zU+pynWf0D+vff1corleZLw67QejdX0W5I6Vtvb5M2mI8PEd1E/A0hCgo4cZCjgkUIMYZpjxKr4TBYZIkqk0ml0VHmyONY7KJOW7RxHeMlfDrheFvVbsrj24Pue3SXXjrwVhcW3o9hR7bWB6bqyE5obf3VhpaNu4Te55ZsbbasLCFH+iuWxSF5lyk+CUdd1NuaQU5f8dQvPMpTuJXYSWAy6rPBe+CpsCk+FF8KXv9TIzt6tEcuAcSw+q55TzcbsJdJM0utkuL+K9ULGGPmQMUNanb4kTZyKOfLaUAsnBneC6+biXC/XB567zF3h+rkIrS5yI47CF/VFfCHwvjO+Pl+3b4hhp9u+02TrozFa67vTkbqisXqUj9sn9j2OqhMZsrG+sX5WCCu0omNqSrN0TwADJW1Ol/MFk+8RhAt8iK4tiY+rYleQTysKb5kMXpcMSa9I2S6wO4/tA7ZT1l3maV9zOfMqcOkb/cPrLjdVBl4ZwNFzLhegM3XkCbB8XizrFdsfPJ63gJE722OtPW1huos+VqvbdC5bHgG7D6vVn8+q1d3n5H8LeKP8BqkjCtbCoV8yAAAACXBIWXMAAAsTAAALEwEAmpwYAAABbmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNC40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iPgogICAgICAgICA8ZGM6c3ViamVjdD4KICAgICAgICAgICAgPHJkZjpCYWcvPgogICAgICAgICA8L2RjOnN1YmplY3Q+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgrlPw1BAAABGUlEQVQoFXWSvU4CQRRGdwydxWYLXkCp7ayIhMYIRPEJtDOGAG8AFY1vQOigZi202cQYY4XFJiRYWm2NsbE2LOfbnYlbwE0O3/2bO8PMemma+uAJ7AjuILHco8eurl6jwBhTonAOHfiFMzDwDgGM4YXePzf5gsQHXGsAFsKj9dv4C2gpLjFdx+jBA4knVLbKxdPAZ3o2xF30S9vqzDUKN65pl9I8Ix9rQWIbYvSThSMbZ0LjAOcETuFQf1aLZE7z6P9X+QNbNwp0dVUm36J7jZ2mFJda+QoBiSs0Mx0DhoW4iV+GyF1ri0BXd8lOiDeH0Pqq6cqzWvHhGiR1vB+og477Bpo8gYgB2cMVP40KBb3JGr6hDxXtZPG3KYiAhJlWaikAAAAASUVORK5CYII=) no-repeat 100% 43%;
}

行为

现在我们已经有了我们的结构和样式，我们将添加 JavaScript 增强功能来为导航、图片库和辅助内容添加功能。

导航

导航对于自适应体验来说尤其棘手。 顶部导航在桌面站点中很常见，但顶部导航可能会挤满屏幕并在小屏幕上将主要内容向下推。 我们要突出显示产品而不是站点导航，因此我们将尽最大努力使导航不受影响。

在我们的标记中，我们创建了一个名为 #nav-anchors 的列表，它将用于切换小屏幕导航和搜索栏的可见性。

<ul  class="nav-anchors">
  <li><a href="#nav">Menu</a></li>
  <li><a href="#search">Search</a></li>
</ul>
<form action="#" method="post" class="search reveal">
  <fieldset>
    <legend>Search the Site</legend>
    <input type="search" placeholder="Search Store" />
    <input type="submit" value="Search" />
  </fieldset>
</form>
<nav class="nav reveal">
  <ul role="navigation">
    <li><a href="#">T-shirts</a></li>
    <li><a href="#">Hoodies</a></li>
    <li><a href="#">Pants</a></li>
  </ul>
</nav>

我们将添加一个调整大小的侦听器，它将确定是否有足够的空间来显示导航和搜索栏。

$(w).resize(function(){ //Update dimensions on resize
  sw = document.documentElement.clientWidth;
  sh = document.documentElement.clientHeight;
  checkMobile();
});
  
//Check if Mobile
function checkMobile() {
  mobile = (sw > breakpoint) ? false : true;

  if (!mobile) { //If Not Mobile
    $('[role="tabpanel"],#nav,#search').show(); //Show full navigation and search
  } else { //Hide 
    if(!$('#nav-anchors a').hasClass('active')) {
      $('#nav,#search').hide(); //Hide full navigation and search
    }
  }
}

图片库

默认情况下，图库只是一个带有缩略图的大图像，点击后可以看到更大的对应物。 这意味着 JavaScript 支持较差或没有 JavaScript 支持的浏览器和设备可以访问它们。

<div class="product-img">
  <figure class="img-container">
    <img src="images/product_img_1.jpg" alt="Super Ffly T-shirt" />
  </figure>
  <nav>
    <ul>
      <li><a href="images/product_img_1.jpg"><img src="images/product_img_1_thumb.jpg" alt="Super Ffly Men's Shirt" /></a></li>
      <li><a href="images/product_img_2.jpg"><img src="images/product_img_2_thumb.jpg" alt="Super Ffly Women's Shirt" /></a></li>
      <li><a href="images/product_img_3.png"><img src="images/product_img_3_thumb.jpg" alt="Ffly Logo" /></a></li>
    </ul>
  </nav>
</div>

我们将从可用的缩略图图像构建图像轮播：

function buildGallery() {
  container.html('<div><ul /></div>');
  imgList = $('#img-list');
  nav.find('a:first').addClass('active');
  
  //For Each Navigation Link
  nav.find('a').each(function() {
    var $this = $(this);
    var href = $this.attr('href');
      
    //Prepare list item with image source in data attribute
    arr += '<li data-imgsrc="'+href+'"></li>';
  });
  
  //Append to #img-list
  imgList.find('ul').append(arr);
      
  //Nav Thumbnail Click
  nav.on('click', 'a', function(e) {
    var pos = $(this).parent().index();
    e.preventDefault();
    loadImg(pos);
    if(swipeEnabled) {
      mySwipe.slide(index, 300);
    }
    updateNav(pos);
  });
}

为了进一步增强体验，我们使用 Modernizr 来检测是否存在触摸事件和 CSS 转换，如果支持，我们将加载一个名为 的库 SwipeJS 来制作一个触摸友好的图像轮播。

Modernizr.load({
  test: Modernizr.touch && Modernizr.csstransitions,
  yep: 'js/swipe.js',
  complete: function() {
    if (Modernizr.touch && Modernizr.csstransitions) {
      swipeEnabled = true;
      buildSwipe();
    }
  }
});

//Build Swipe Carousel
function buildSwipe() {
  //Initialize Swipe.js
  w.mySwipe = new Swipe(document.getElementById('img-list'), {
    callback: function(event, index, elem) {
      updateNav(index);
      loadImg(index + 1);
    } 
  });
}

我们现在有一个可访问的图片库，并为支持触控的设备添加了增强功能。

相关内容

为了减少初始页面大小，默认情况下我们不会加载辅助内容，即相关的 T 恤和产品评论。 相反，它们作为自己的 HTML 页面存在，作为默认行为通过链接访问。

<section class="aux related-products">
  <header>
    <a href="related.html">
      <h2>Similar T-shirts</h2>
    </a>
  </header>
</section>
<section class="aux reviews">
  <header>
    <a href="reviews.html">
      <h2>8 Reviews</h2>
      <ol class="star">
        <li class="on">★</li>
        <li class="on">★</li>
        <li class="on">★</li>
        <li class="on">★</li>
        <li>☆</li>
      </ol>
    </a>
  </header>
</section>

当满足以下两个条件之一时，我们将引入相关内容：
当小屏幕用户点击相关衬衫或产品评论链接时
当屏幕有足够的空间加载辅助内容时。

//Check if Mobile
function checkMobile() {
  if(sw > breakpoint) {
    mobile = false; //Not Mobile
  } else {
    mobile = true; //Mobile
  }
  
  if (!mobile) { //If Not Mobile
    loadAux(); //Load auxiliary content
  }
}

//Set up Auxiliary content
function loadAux() {
  var $aux = $('.aux');
  $aux.each(function(index) {
    var $this = $(this);
    var auxLink = $this.find('a');
    var auxFragment = auxLink.attr('href');
    var auxContent = $this.find('[role=tabpanel]');
    if (auxContent.size()===0 && $this.hasClass('loaded')===false) {
      loadContent(auxFragment,$this);
    }
  });
}

function loadContent(src,container) { // Load Tab Content
  container.addClass('loaded');
  $('<div role="tabpanel" />').load(src +' #content > div',function() {
    $(this).appendTo(container);
  });
}

注意：我们使用屏幕大小来确定何时加载内容，但这绝不是完美的。 留意 navigator.connection 以获得更好的方法来确定是否值得引入额外的内容。

地理位置

利用用户位置来提供增强的体验是移动开发的一个重要方面。 幸运的是，地理定位是移动浏览器（以及大多数桌面浏览器）中受支持的最佳功能之一。 回退功能可以是一种简单的形式，用户只需输入他们的邮政编码即可找到附近的商店。

下一步

自适应图像

我们的演示没有包含很多大图像，但最佳做法是默认加载移动优化的图像，然后仅在需要时有条件地加载更大的图像。 有 响应式图像 很多不同的技术 ，包括客户端和服务器端。 到目前为止，我们已经做了很多工作来关注性能，优化图像是进一步优化性能的一种简单方法。

少JS

保持页面尽可能轻量级对于性能很重要，因此我们应该尽可能地优化脚本。 我们在 使用了 jQuery 演示中 库，但我们绝对不会使用所有的库。 我们可以考虑使用 Closure Compiler 去除 库中未使用的部分，以尽可能保持轻量级，同时仍然利用 jQuery 提供的功能。 或者，我们可以研究 微框架 像 Zepto.js 等 ，但它们通常不一定提供最好的跨浏览器支持。 编写 vanilla Javascript 可以避免额外的负担，但可能更难以编写和维护。 最终，每种方法都有其优点和缺点，在做出这些决定时一定要考虑权衡。

离线访问

确保可以离线访问网络体验变得越来越重要，尤其是在考虑具有可变连接性的移动用户时。 幸运的是， appcache 和 其他离线技术 为我们提供了一种即使在用户离线时也能保持资源可访问的方法。

包起来

我们创造了一种体验，它关注用户上下文，并根据浏览器和设备的特性调整布局和功能。 我们还建立了一个可以适应未来设备和浏览器的基础。 以下是一些关键要点：

• 创作语义 HTML5 标记作为自适应体验的基础。
• 创建移动优先 CSS 以保持轻量级、简单和可维护性。
• 使用相对单位，如 em 和百分比，以保持样式尽可能流畅和灵活。
• 让内容决定媒体查询的断点。
• 通过有条件地加载内容和使用 HTML 字符、CSS 渐变、数据 URI 等，利用机会减少 HTTP 请求
• 编写不显眼的 javascript 并使用 Modernizr 等工具来检测功能。
• 利用以移动为中心的功能，如触摸事件、电话链接和地理定位，为移动用户提供增强的体验。

创建自适应体验可以让您的内容传播到更多地方，这意味着有更多机会接触潜在客户，无论他们身在何处。 通过坚持渐进增强和首先解决约束的原则，我们正在奠定一个 面向未来的 基础，使我们的网站有更好的机会在未来的浏览器和环境中工作。