响应式Web设计:HTML5和CSS3实战(第2版)

第十章 实现响应式Web设计

10.1 尽快让设计在浏览器和真实设备上运行起来

• 让设计决定断点
  • 总是从最小的屏幕尺寸开始设计，渐渐地使视口尺寸增大
    • 这样你就能知道在哪个地方加入断点。
    • 首先为最小的视口编写CSS，然后在媒体查询中修改其在较大视口下的表现。

    .rule {
      /* 小型视口样式*/
    }
    @media(min - width: 40e m) {
      .rule {
        /* 中型视口样式*/
      }
    }
    @media(min - width: 70e m) {
      .rule {
        /* 大型视口样式*/
      }
    }

10.2 在真实设备上观察和使用设计

• 早测试，常测试！
• 使用像BrowserSync这样的工具来同步你的工作 （ https://browsersync.io/ ）
  • 配置完成后，当你保存你的工作时，诸如CSS等的变化就会被注入到浏览器上，而无需你不断地刷新屏幕。
  • 它还能通过WIFI将在不同设备上的浏览器刷新。
  • 这节省了拿起每个测试设备点击刷新的时间。
  • 它甚至能同步滚动和点击

10.3 拥抱渐进增强

• 应该编写能够精确描述你的内容的HTML5标记
  • 基于文本和内容的网站
    • 正确使用main、header、footer、article、section和aside等元素
  • 构建Web应用或者图形化UI组件
    • 需要思考一下如何提炼成有效的标记
    • 在HTML上的优化越多
    • 你在CSS和JavaScript上为老式浏览器所做的优化就越少

10.4 确定需要支持的浏览器

• 有的时候根据项目需要，你要从更为高级的浏览器开始编写
  • 如，在你的项目中JavaScript是必需的

10.4.1 等价的功能，而不是等价的外观

• 网站在每个浏览器上的外观和工作方式一样是不现实也是不可取的
• “支持老式浏览器”并不意味着“在老式浏览器上看起来一模一样”。

10.4.2 选择要支持的浏览器

• 如果这是个新项目，并且没有统计数据
  • 我通常会遵循“前两个版本”策略
    • 即是指当前的浏览器版本和之前的两个浏览器版本。
    • 如果IE12是目前的浏览器版本，那么你就要兼容IE10和IE11（前两个版本）。

10.5 分层的用户体验

• 基本体验是站点的最小可行版本
• 增强体验则是包括所有功能并且最为美观的版本
• 然后通过Modernizr，我们可以根据浏览器的兼容性优化体验。
• 实现体验分层
  • Modernizr为基于浏览器兼容性的优化提供了最为稳健的方式
  • 当编写CSS的时候，“基础”版本代码由以下内容组成
    • 没有被媒体查询包裹的代码
    • 没有被Modernizr添加选择器的代码

10.6将CSS断点与JavaScript联系起来

• JavaScript总是返回宽度的像素值而不是REM值

    @media(min-width: 20rem) {
      body::after {
        content: "Splus";
        font-size: 0;
      }
    }
    @media(min-width: 47.5rem) {
      body::after {
        content: "Mplus";
        font-size: 0;
      }
    }
    @media(min-width: 62.5rem) {
      body::after {
        content: "Lplus";
        font-size: 0;
      }
    }

• 在每一个我们想和JavaScript沟通的断点处，我们使用了after伪元素
  • 你也可以使用before伪元素
  • 将其内容设置为断点的名称
  • 在JavaScript中，我们可以阅读这个值
    • 我们将这个值赋给一个变量

    var size = window.getComputedStyle(document.body,':after'). 
    getPropertyValue('content'); 

• 下面是一个简单的自我调用函数（自我调用意味着它在浏览器解析它的时候马上被调用）
  • 来根据视口大小弹出不同的信息

    ;(function alertSize() {
      if (size.indexOf("Splus") != -1) {
        alert('I will run functions for small screens');
      }
      if (size.indexOf("Mplus") != -1) {
        alert('At medium sizes, a different function could run');
      }
      if (size.indexOf("Lplus") != -1) {
        alert('Large screen here, different functions if needed');
      }
    })();

10.7 避免在生产中使用CSS框架

• 最为有名的两个是Bootstrap（http://getbootstrap.com/ ）和Foundation（http://foundation.zurb.com/ ）
• 在快速制作原型方面有巨大的优势
  • 例如，把交互方式展现给客户看
• 在生产中应该避免使用它们
  • 首先，从技术上看，添加一个框架会为你的项目带来过多的冗余代码。
  • 其次，从美学的角度上看，因为这种框架十分普及，所以你的项目会和无数个其他项目看起来一模一样。
  • 最后，如果你只是在你的项目里复制粘贴代码，然后调整至符合你的需求，那么你就不可能充分理解它们的原理。

10.8 尽可能使用最简单的代码

• 需要为列表中的第五个元素添加不同的样式
• 并且你能操作标记，那就不要像下面这样使用nth-child选择器：

    .list-item:nth-child(5) { 
    /* 样式*/ 
    } 

• 直接在标记上添加HTML类是更为明智的做法

    <li class="list-item specific-class">Item</li> 

• 然后使用类来添加样式：
  • 不仅更易懂，而且支持度也更高（旧版本的IE浏览器并不支持nth-child选择器）

    .specific-class { 
    /* 样式*/ 
    }

10.9 根据视口隐藏、展示和加载内容

• 响应式Web设计中有一个常用的准则：
  • 如果你在小屏幕上不加载某一部分，那么在大屏幕上也不应该加载。
    • 意味着在每一个视口下用户都应该能达到同样的目的（购买产品、阅读文章、完成交互）
    • 随着屏幕的尺寸越来越大，我们也没有必要去增加额外的部分（窗口小部件、广告、链接等）来填充空白。
  • 将复杂的可视化工作交给CSS
    • JavaScript可以实现单独使用CSS无法实现的交互效果
    • 如果可能的话，在涉及视觉效果的时候，我们仍然应该将工作交给CSS来完成,这意味着:
      • 不要单独使用JavaScript实现菜单移入、移出、打开、关闭的动画效果
        • jQuery的show和hide
    • 相反，应该使用JavaScript在相关的部分上做简单的类变换，然后让类去触发CSS展示相关的动画效果。

10.10 验证器和代码检测工具

• 官方： https://validator.w3.org/
• 更好的方法是为你的HTML、CSS和JavaScript安装和配置检测工具

10.11 性能

• 基础条例：
  • (1) 减少你的资源数（例如，不要加载15个JavaScript文件，而应该将它们拼成一个）。
  • (2) 减小你的页面大小（如果你能压缩图片，那么请压缩）。
  • (3) 延迟加载非必需资源（如果你可以将CSS和JavaScript的加载延迟到页面加载完成后，就可以大幅缩短初始化时间）。
  • (4) 保证页面尽快可用（通常是上述所有步骤的副产物）。
• 有很多工具可以度量和优化性能
  • 我最喜欢的是https://www.webpagetest.org/
    • 会显示出一份完整的页面分析
    • 还会按照幻灯片的方式显示出页面的加载过程，让你知道如何改进页面加载速度