响应式网页开发设计与实际应用( 二 ) _响应式

说到创建液态页面，最好看看Zoe Mickley Gillenwater的那本《Flexible Web Design: Creating Liquid and Elastic Layouts with CSS》 “怎样创建弹性图片” 。
另外，Zoe的这篇”Essential Resources for Creating Liquid and Elastic Layouts.“提供了不少关于创建弹性网格和布局的教程、资源、创意指导和实现方式。
从技术角度讲，虽然听上去这些都很简单，但它着实相当复杂。
举个例子，仔细观察Ethan Marcotte提供的实例中的logo图片：

文章插图
如果我们将浏览器窗口不断调小，会发现logo图片的文字部分始终会保持同比缩小，保证其完整可读，而不会和周围的插图一样被两边裁掉。
所以整个logo其实包括两部分：插图作为页面标题的背景图片，会保持尺寸，但会随着布局调整而被裁切；文字部分则是一张单独的图片。
<h1 id="logo">
<a href=https://www.isolves.com/it/wlyx/wzjs/2019-07-16/"#">

alt="The Baker Street Inquirer" /></a></h1>
其中，元素使用插图作为背景，文字部分的图片始终保持与背景的对齐。
这个实例小小的展示一下响应式Web设计的思路。
不过这点小努力还不足以避免整个布局在小尺寸窗口中变的过窄或过短，并且logo文字最终会变的小到难以识别，背景图片也会被过多的裁切。
弹性图片
响应式Web设计的思路中，一个重要的因素是怎样处理图片方面的问题。有很多同比缩放图片的技术，其中有不少是简单易行的。
其中，由Richard Rutter最先尝试的一种做法比较流行，即使用CSS的max-width属性。这个方法在Ethan Marcotte的液态图片一文中也有提到。
img { max-width: 100%; }
只要没有其他涉及到图片宽度的样式代码覆盖掉这一行规则，页面上所有的图片就会以其原始宽度进行加载，除非其他设备可视部分的宽度小于图片的原始宽度。
上面的代码确保图片最大的宽度不会超过浏览器窗口或是其容器可视部分的宽度，所以当窗口或容器的可视部分开始变窄时，图片的最大宽度值也会相应的减小，图片本身永远不会容器边缘隐藏和覆盖。
实际上，就像Jason Grigsby在他的CSS Media Query for Mobile is Fool’s Gold一文中提到的，”液态图片背后的思路，就是无论何时，都确保在其原始宽度范围内，以最大的宽度同比完整的显示图片。
我们不必在样式表中为图片设置宽度和高度，只需要让样式表在窗口尺寸发生变化时辅助浏览器对图片进行缩放。” 一种简而美的方法。
图片本身的分辨率及加载时间是另外一个需要考虑的问题。虽然通过上面的方法，可以很轻松的缩放图片，确保在移动设备的窗口中可以被完整浏览，但如果原始图片本身过大，便会显著降低图片文件的下载速度，对存储空间也会造成没有必要的消耗。
响应式图片
由Filament Group提出的”响应式图片”技术思想，有助于解决上面提到的问题：不仅要同比的缩放图片，还要在小设备上降低图片自身的分辨率。可以看下demo页面先。

文章插图
这个技术的实现需要使用几个相关文件，我们可以在Github上获取。包括一个JAVA文件(rwd-images.js)，一个.htaccess文件，以及一些范例资源文件。
具体使用方法可以参考Responsive Images的说明文档。大致的原理是，rwd-images.js会检测当前设备的屏幕分辨率，如果是大屏幕设备，则向页面head部分中添加BASE标记，并将后续的图片、脚本和样式表加载请求定向到一个虚拟路径”/rwd-router” 。
当这些请求到达服务器端，.htacces文件会决定这些请求所需要的是原始图片还是小尺寸的”响应式图片”，并进行相应的反馈输出。对于小屏幕的移动设备，原始尺寸的大图片永远不会被用到。
<img src=https://www.isolves.com/it/wlyx/wzjs/2019-07-16/"smallRes.jpg" data-fullsrc="largeRes.jpg">
Date-fullsrc``是html5中的一个定义文件的属性，宽度超过480px的屏幕，就会加载较大分辨率的图片（largeRes.jpg），小屏幕分辨率的就会加载较小的图片（smallRes.jpg）。
JS文件中插入一个基本元素，允许页面将图像重新定向，当页面加载时只是加载适合屏幕分辨率的图片，而其他图像不会被下载。
尤其是带有大量图片的网站，这种技术可以节省很大的带宽和加载时间。
这项技术支持多数的现代浏览器，包括IE8+、Safari、Chrome和Opera，以及这些浏览器的移动设备版本；在FireFox及一些旧浏览器中，则会优雅降级：我们仍可得到小图片的输出，但同时，原始大图也会被下载。