响应式web设计

前端基础知识

什么是响应式web设计

响应式网页设计（RWD，Responsive Web Design）这个术语，由伊桑·马科特（Ethan
Marcotte）提出。将三种已有的开发技巧（弹性网格布局、弹性图片、媒体和媒体查询）整合起来，并命名为响应式网页设计。这个术语还有一堆表示相同意思的其他叫法，如流式设计、弹性布局、塑料布局、流体设计、自适应布局、跨设备设计以及弹性设计
Alt text

向下兼容，移动优先

响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式；我们应当向下兼容、移动优先。
首先我们应该遵循移动优先原则，交互&设计应以移动端为主，PC则作为移动端的一个扩展；一个页面需要兼容不同终端，那么有两个关键点是我们需要去做到响应式的：

  1. 响应式布局
  2. 响应式内容（图片、多媒体）

桌面浏览器部分

  1. 设备像素和CSS像素
    设备像素其值可以（通常情况下）从screen.width/height属性中读出
  • 如果你给一个元素设置了width: 128px的属性，并且你的显示器是1024px宽，当你最大化你的浏览器屏幕，这个元素将会在你的显示器上重复显示8次,形式上，元素仍然是128个CSS像素宽，即使它占据了256个设备像素的空间
  • 100%缩放 : 在缩放比例100%的情况下一个CSS像素完全等于一个设备像素。
  1. 屏幕尺寸(screen.width/height)
  • 意义：用户屏幕的整体大小。
  • 度量单位：设备像素。
  • 浏览器错误：IE8以CSS像素对其进行度量，IE7和IE8模式下都有这个问题。
    Alt text
  1. 窗口尺寸(window.innerWidth/Height)
  • 意义：浏览器窗口的整体大小，包括滚动条。
  • 度量单位：CSS像素。
  • 浏览器错误：IE7不支持。Opera以设备像素进行度量
    Alt text
  1. 滚动距离(window.pageX/YOffset)
  • 意义：页面滚动的距离。
  • 度量单位：CSS像素。
  • 浏览器错误：无。
    Alt text
  1. 度量viewport
    (document.documentElement.clientWidth/Height)
  • 意义：Viewport尺寸。
  • 度量单位：CSS像素。
  • 浏览器错误：无。

Alt text
如果你了解DOM，你应该知道document.documentElement实际上指的是元素：即任何HTML文档的根元素。可以说，viewport要比它更高一层；它是包含元素的元素。
Alt text

  1. 度量元素(document.documentElement.offsetWidth/Height)
  • 意义：元素（也就是页面）的尺寸。
  • 度量单位：CSS像素。
  • 浏览器错误：IE度量的是viewport，而不是元素。
    Alt text
  1. 事件中的坐标
    (pageX/Y, clientX/Y, screenX/Y)
    浏览器错误：IE不支持pageX/Y。IE和Opera以CSS像素为单位计算screenX/Y。
  • pageX/Y提供了相对于元素的以CSS像素度量的坐标。
    Alt text
  • clientX/Y提供了相对于viewport的以CSS像素度量的坐标
    Alt text
  • screenX/Y提供了相对于屏幕的以设备像素进行度量的坐标。
    Alt text
  1. 媒体查询
    (浏览器错误：IE不支持它们。)
  • 如果 device-width/height是以CSS像素进行度量的，那么Firefox将会使用screen.width/height的值。
  • 如果width/height是以设备像素进行度量的，那么Safari和Chrome将会使
  • 8.1 documentElement.clientWidth/Height的值。width/height使用和documentElement .clientWidth/Height（换句话说就是viewport宽高）一样的值。它是工作在CSS像素下的。
  • 8.2 device-width/device-height使用和screen.width/height（换句话说就是屏幕的宽高）一样的值。它工作在设备像素下面。

Alt text

移动浏览器部分

##两个viewport

layout viewport

Alt text

  1. 度量layout viewport
    我们现在有两个需要度量的viewport。很幸运的是浏览器战争给我们提供了两个属性对。
    document.documentElement.clientWidth和-Height包含了layout viewport的尺寸。

document.documentElement.clientWidth/Height

  • 意义：Layout viewport的尺寸
  • 度量单位：CSS像素
  • 完全支持Opera, iPhone, Android, Symbian, Bolt, MicroB, Skyfire, Obigo。
  • 在Iris中Visual viewport有问题
  • 浏览器兼容性问题

###visual viewport
visual viewport是页面当前显示在屏幕上的部分。用户可以通过滚动来改变他所看到的页面的部分，或者通过缩放来改变visual viewport的大小。
Alt text
注： 无论怎样，CSS布局，尤其是百分比宽度，是以layout viewport做为参照系来计算的，它被认为要比visual viewport宽。

  1. 度量visual viewport
    对于visual viewport，它是通过window.innerWidth/Height来进行度量的。很明显当用户缩小或者放大的时候，度量的尺寸会发生变化，因为屏幕上的CSS像素会增加或者减少。

viewport meta标签（Meta viewport）

Alt text

  • 意义：设置layout viewport的宽度。
  • 度量单位：CSS像素。
  • 完全支持Opera Mobile，iPhone，Android，Iris，IE，BlackBerry，Obigo。
    不支持Opera Mini，Symbian，Bolt，Firefox，MicroB，NetFront。
  • 问题：Skyfire不能处理我的测试页面。

    响应式布局

    弹性的栅格布局，不同尺寸下弹性适应，如以下页面中各模块在不同尺寸下的位置：
    Alt text

栅格框架推荐:

  • Responsive Grid System
  • Fluid 960 Grid
  • Simple Grid

    响应式图片

  1. 什么是响应式图片？
    根据显示器分辨率，提供多个图片源，在页面上图片的尺寸，或者其它参数的一种方法
    目前最常用的解决方案：

  2. css样式
    此代码使用 max-width:100% 的设置，以确保图像永远不会超越其父容器的宽度。如果父容器的宽度收缩小于图像的宽度，图像将随之缩小。

    1
    2
    3
    4
     img {
        max-width: 100%;
        height: auto;
    }

  3. picture是HTML5一个新的元素

  • 创建 picture 标签。
  • 在这些标签内创建一个你想用来执行任何一个特性的 source元素。
  • 添加一个 media 属性，用来包含你想要的特性，如视口的当前高度(viewport height)，宽度( width )，方向(orientation)等。
  • 添加一个 srcset 属性与相应的图像文件名相匹配，进行加载。如果你想提供不同的像素密度，例如Retina显示屏，你可以添加额外的文件名到你的 srcset 属性中，
  • 添加一个回退的 img 元素。

Alt text

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
		(function() {
  var currentSrc, oldSrc, imgEl;
  var showPicSrc = function() {
    oldSrc     = currentSrc;
    imgEl      = document.getElementById('picimg');
    currentSrc = imgEl.currentSrc || imgEl.src;
    
    if (typeof oldSrc === 'undefined' || oldSrc !== currentSrc) {
      document.getElementById('logger').innerHTML = currentSrc;
    }
  };
  // You may wish to debounce resize if you have performance concerns
  window.addEventListener('resize', showPicSrc);
  window.addEventListener('load', showPicSrc);
})(window);
	
<body>
	<picture>
  <source media="(min-width: 650px)" srcset="images/kitten-large.jpg">
  <source media="(min-width: 465px)" srcset="images/kitten-medium.jpg">
  <!-- img tag for browsers that do not support picture element -->
  <img src="images/kitten-small.jpg" id="picimg">
 </picture>
</body>
  1. Picturefill
    其原理就是JS获取Source的源以及CSS Media Queries规则，输出适应图片， 逻辑细节这里不再解析，感兴趣的可查看其JS代码，逻辑不是很复杂，也可以自己封装一个类库，例如图片加载失败的替代方案。
    http://scottjehl.github.io/picturefill/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="images/3.jpg" media="(min-width: 1000px)">
  <source srcset="images/4.jpg" media="(min-width: 800px)">
  <!--[if IE 9]></video><![endif]-->
  <img srcset="images/6.jpg" alt="…">
</picture>
显示密度描述:
<img src="cat.jpg" alt="cat" srcset="cat.jpg, cat-2X.jpg 2x">
宽度描述符:
当图片开始下载时浏览器知道的只有视窗尺寸
<img src="cat.jpg" alt="cat"  srcset="cat-160.jpg 160w, cat-320.jpg 320w, cat-640.jpg 640w, cat-1280.jpg 1280w">
浏览器如何选择正确的sizes:
<img src="cat.jpg" alt="cat"
  srcset="cat-160.jpg 160w, cat-320.jpg 320w, cat-640.jpg 640w, cat-1280.jpg 1280w"
  sizes="(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px">
Srcset和sizes ＝ 智能浏览器
  1. 在一些场景下单独用img可能就够了：
  • 固定宽度，单一分辨率网页:如果你没有用响应式设计并且不用担心”retina”屏幕，img元素就够了
  • 文件尺寸差别很小:对于有些图片，最大版本和最小版本的尺寸没有很大区别。常见的有logo，图标和其他不需要根据视窗变化的小图片。如果文件尺寸没什么区别，一张图片可能就够了
  • 使用基于矢量的图片例如SVG:如果使用基于矢量的图片格式例如SVG，图片可以自由缩放并不需要多张图片。在这种情况下，可以直接用SVG做为img的图片源。

    逐渐增强与优雅降级

  • 优雅降级：指的是为现代浏览器制作网站，然后保证为某些老版本浏览器提供基本可用的体验。新特性在老版本浏览器中会降级，且一般会有一个分界点，声明不支持那些老掉牙的浏览器。有些时候用户也仅会被警告他们所使用的浏览器有问题，建议其更换
  • 逐渐增强：渐进增强以恪守 Web标准的标签为基础，意味着它在所有浏览器中均可用。然后通过 CSS 样式和必要的 JavaScript 来为更先进的浏览器提供渐进式的增强体验。

    JavaScript中的shim与polyfill是？

  • shim是指一个库，它将一个新的API引入到一个旧的环境当中，而且仅靠旧的环境中已有的手段实现
  • 一个polyfill就是一个用浏览器API上的shim
  • 我们通常的做法：先检查当前浏览器是否支持某个API，如果
    不支持的话，就加载对应的polyfill，然后新旧的浏览器就可以使用这个API了
  • 区别：polyfill是shim的一种，
    shim 是将不同 api 封装成一种，比如 jQuery 的 $.ajax 封装了 XMLHttpRequest 和 IE 用 ActiveXObject 方式创建 xhr 对象；polyfill 特指 shim 成的 api是遵循标准的，其典型做法是在IE浏览器中增加window.XMLHttpRequest，内部实现使用ActiveXObject。在实际中为了方便做对比，会特指shim的api不是遵循标准的，而是自己设计的。
  • 使用Modernizr检查HTML5和css3浏览器支持功能。
    Modernizr是一个用于检测浏览器功能的开源JavaScript库。
    注意：Modernizr并不是试图添加老版本浏览器不支持的功能，而是令你通过创建可选风格配置来修改页面设计。它可以通过加载定制的脚本来模拟老版本浏览器不支持的功能。’

参考链接：
http://www.quirksmode.org/mobile/viewports2.html
http://isux.tencent.com/responsive-web-design.html
http://www.berkeley.edu/
参考书籍：《响应式web设计》

本文标题:响应式web设计

文章作者:陈玉

发布时间:2017-03-03, 15:10:06

最后更新:2017-03-03, 19:57:19

原始链接:http://yoursite.com/2017/03/03/响应式web设计/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录
  1. 1. 什么是响应式web设计
  2. 2. 向下兼容，移动优先
  • 桌面浏览器部分
  • 移动浏览器部分
    1. 1. layout viewport
    2. 2. viewport meta标签（Meta viewport）
    3. 3. 响应式布局
    4. 4. 响应式图片
    5. 5. 逐渐增强与优雅降级
    6. 6. JavaScript中的shim与polyfill是？
    • |