详解响应式网页设计与应用发布者：本站     时间：2021-12-15 11:12:37

每个射击湿都想自己的网站可以在任何设备上体验都很牛，神马iPhone、ipad、黑莓、kindle……无所不能啊~ 苦逼的是这些东东的系统不一样，分辨率也不一样啊；电脑的屏幕越来越大，但是还有一半的用户还是用的17寸CRT；手机、pad层出不穷，没有个统一标 准，我们又不想失去任何一个用户，这可苦了我这些设计师了，需要付出更多的心血来获得更好的体验，谁让我们是射击湿呢。

电子产品更新换代节奏都快成马了，跟都跟不上。对于网站来说根本不可能为每种设备都开发个版本出来，结果就是赢得鱼，却失去了熊掌，不过我们还是有办法的。

响应式Web设计(Responsive Web design)，理念是设计和开发应根据屏幕的大小、平台的用户的行为和环境基础上自动调整；他应该有一个灵活的网格和布局，图像和CSS能够智能的组合 使用。比如说用户从电脑切换到ipad，网站能够自动切换以适应分辨率，图像大小和脚本。换句话说，网站应该具备根据用户的使用环境来自动调整，这可以减 少不必要的重复设计。

响应式Web设计的概念
Ethan Marcotte曾经在A List Apart发表过一篇文章“Responsive Web Design”，文中援引了响应式建筑设计的概念：

所谓响应式建筑设计就是设计师尝试建造一种使用一些传感器检测周围环境，比如说温度、湿度、光线等等自动进行调整的房子。现在我们把这个思路延伸到 WEB设计领域。我们可以想，为啥我们要为每个用户群各自打造一套设计方案呢？我们太笨了，有没有更智能的做法？和响应式建筑设计一样，web设计也应该 做到智能调整。

显然web设计不能使用传感器，这就要更多的抽象思维。好在现在一些概念已经得到实践了，比如液态布局、 帮助页面重新格式化的media queries和脚本等。但是响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式。

调整分辨率
不同的设备都有各自的屏幕分辨率、清晰度以及屏幕定向方式，不断被研发的各种新设备也将出现新的屏幕尺寸规格。有些设备 基于横屏 (portrait)，有些是竖屏(landscape)，甚至还有正方形；对于日益流行的iPhone、iPad及其他一些智能手机、平板电脑，用户还 可以通过转动设备来任意切换屏幕的定向方式。怎样才能做到让一种设计方案满足所有情况？

详解响应式<a href=/photoshop/web/ target=_blank class=infotextkey>网页设计</a>与应用,PS教程,

 要想做到同时兼容横、竖屏(用户还有可能在页面加载的过程中切换方向)，我们就必须考虑N种屏幕尺寸规格。我们可以将 这些规格划分为几个大类，然后为每一类做一种方案，确保该方案至少在本组中尽量具有弹性。但即使这样，结果也将是非常不爽的，谁知道某类设备在5年之后的 占有率是多少？而且很多用户甚至不去将浏览器的窗口最大化；天哪，哥受不了了……

Morten Hjerde和他的哥们对2005至2008年市场中的400余种移动设备进行了统计(查看报告)，下图为大致统计结果：

详解响应式网页设计与应用,PS教程,

在08年之后，更多更有代表性的新设备问世并普及了。显然，我们不可以沿着“多方案”的思路继续走下去；那么我们应该怎样做呢？

部分解决方案：一切弹性化
几年前，弹性布局(flexible layout)几乎是一种奢侈品，所谓弹性，也只是体现在竖排布局以及字号等方面；图片尺寸无法变化，这就导致图片破坏了页面结构，而且即使是有弹性的元 素，在很多情况下他会乱弹，仍然是一塌糊涂。所以，所谓的弹性布局其实并非那样弹性，它有时甚至不能适应台式机与笔记本的屏幕分辨率差异，更不用说手机等 移动设备了。

现在，我们可以通过响应式的设计和开发思路让页面更加”弹性”了。图片的尺寸可以自动调整，页面布局再不会被破坏。虽然永远没有最完美的方案，但它给了我们更多选择。无论用户切换设备的屏幕定向方式，还是从台式机屏幕转到iPad上浏览，页面都会真正的富有弹性。

在前文提到的Ethan Marcotte的文章中，他通过一个实例展示了响应式Web设计在页面弹性方面的特性：

 详解响应式网页设计与应用,PS教程,

该实例的实现方式完美的结合了液态网格和液态图片技术，并且聪明的在正确的地方使用了正确的HTML标记。”液态网格”是一种很常见的实现方式；对于“液态图片”技术，下面的文章做了不错的介绍：

Hiding and Revealing Portions of Images
Creating Sliding Composite Images
Foreground Images That Scale With the Layout
说到创建液态页面，最好看看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图片：

详解响应式网页设计与应用,PS教程,

如果我们将浏览器窗口不断调小，会发现logo图片的文字部分始终会保持同比缩小，保证其完整可读，而不会和周围的插图一样被两边裁掉。所以整个logo其实包括两部分：插图作为页面标题的背景图片，会保持尺寸，但会随着布局调整而被裁切；文字部分则是一张单独的图片。

<h1 id="logo"><a href="#"><img src="site/logo.png" target="_blank" closure_uid_lds9ka="1914">液态图片一文中也有提到。
 

img { max-width: 100%; }

只要没有其他涉及到图片宽度的样式代码覆盖掉这一行规则，页面上所有的图片就会以其原始宽度进行加载，除非其他设备可视 部分的宽度小于图片的原始宽度。上面的代码确保图片最大的宽度不会超过浏览器窗口或是其容器可视部分的宽度，所以当窗口或容器的可视部分开始变窄时，图片 的最大宽度值也会相应的减小，图片本身永远不会容器边缘隐藏和覆盖。实际上，就像Jason Grigsby在他的CSS Media Query for Mobile is Fool’s Gold一文中提到的，”液态图片背后的思路，就是无论何时，都确保在其原始宽度范围内，以最大的宽度同比完整的显示图片。我们不必在样式表中为图片设置宽度和高度，只需要让样式表在窗口尺寸发生变化时辅助浏览器对图片进行缩放。” 一种简而美的方法。


图片本身的分辨率及加载时间是另外一个需要考虑的问题。虽然通过上面的方法，可以很轻松的缩放图片，确保在移动设备的窗口中可以被完整浏览，但如果原始图片本身过大，便会显著降低图片文件的下载速度，对存储空间也会造成没有必要的消耗。


响应式图片

由Filament Group提出的”响应式图片”技术思想，有助于解决上面提到的问题：不仅要同比的缩放图片，还要在小设备上降低图片自身的分辨率。可以看下demo页面先。


详解响应式网页设计与应用,PS教程,


这个技术的实现需要使用几个相关文件，我们可以在Github上获取。包括一个JavaScript文件(rwd-images.js)，一个.htaccess文件，以及一些范例资源文件。具体使用方法可以参考Responsive Images的说明文档。 大致的原理是，rwd-images.js会检测当前设备的屏幕分辨率，如果是大屏幕设备，则向页面head部分中添加BASE标记，并将后续的图片、脚 本和样式表加载请求定向到一个虚拟路径”/rwd-router”。当这些请求到达服务器端，.htacces文件会决定这些请求所需要的是原始图片还是 小尺寸的”响应式图片”，并进行相应的反馈输出。对于小屏幕的移动设备，原始尺寸的大图片永远不会被用到。


<img src="smallRes.jpg" data-fullsrc="largeRes.jpg">

Date-fullsrc是html5中的一个定义文件的属性，宽度超过480px的屏幕，就会加载较大分辨率的图片（largeRes.jpg），小屏幕分辨率的就会加载较小的图片（smallRes.jpg）。


JS文件中插入一个基本元素，允许页面将图像重新定向，当页面加载时只是加载适合屏幕分辨率的图片，而其他图像不会被下载。尤其是带有大量图片的网站，这种技术可以节省很大的带宽和加载时间。


这项技术支持多数的现代浏览器，包括IE8+、Safari、Chrome和Opera，以及这些浏览器的移动设备版本；在FireFox及一些旧浏览器中，则会优雅降级：我们仍可得到小图片的输出，但同时，原始大图也会被下载。


禁用iPhone中的图片自动缩放

在iPhone及iPod Touch中，页面会被自动的同比例缩小至最适合屏幕大小的尺寸，x轴不会产生滚动条，用户可以上下拖拽浏览全部页面，或在需要的时候放大页面的局部。这 里会产生一个问题，即使我们运用响应式Web设计的思想，专门为iPhone的小屏输出小图片，它同样会随着整个页面一起被同比例缩小，如下图左侧所示。


详解响应式网页设计与应用,PS教程,


我们可以使用苹果专有的一些meta标记来解决类似的问题。在页面的<head>部分添加以下代码(详情可以参考Think Vitamin的AG-九游服务相关的文章)：


<meta name="viewport" content="device-width; initial-scale=1.0">

将initial-scale的值设定为”1″，即可覆写默认的缩放方式，保持原始的尺寸及比例。更多关于viewport meta标记的用法，可以参考苹果官方的文档。


打造布局结构

当页面所需要适应的不同设备的屏幕尺寸差异过大时，除了图片方面，我们也应该考虑到整个布局结构的智能化调整；我们可以 使用独立的样式表，或者更有效的，使用CSS media query。这不会引起多大的麻烦，多数样式设定不会被影响和改变，只有一些特定的元素会通过浮动、宽度和高度等的设置来改变位置。


我们可以使用一个默认主样式表来定义页面的主要结构元素，比如#wrapper、#content、#sidebar、#nav等的默认布局方式，以及一些全局性的配色和字体方案。


我们可以监测页面布局随着不同的浏览环境而产生的变化，如果它们变的过窄过短或是过宽过长，则通过一个子级样式表来继承主样式表的设定，并专门针对某些布局结构进行样式覆写。我们来看下代码示例：


下面的代码可以放在默认主样式表style.css中：


/* Default styles that will carry to the child style sheet */html,body{   background...   font...   color...}h1,h2,h3{}p, blockquote, pre, code, ol, ul{}/* Structural elements */#wrapper{    width: 80%;    margin: 0 auto;    background: #fff;    padding: 20px;}#content{    width: 54%;    float: left;    margin-right: 3%;}#sidebar-left{    width: 20%;    float: left;    margin-right: 3%;}#sidebar-right{    width: 20%;    float: left;}下面代码可以放在子级样式表mobile.css中，专门针对移动设备进行样式覆写：#wrapper{    width: 90%;}#content{    width: 100%;}#sidebar-left{    width: 100%;    clear: both;    /* Additional styling for our new layout */    border-top: 1px solid #ccc;    margin-top: 20px;}#sidebar-right{    width: 100%;    clear: both;    /* Additional styling for our new layout */    border-top: 1px solid #ccc;    margin-top: 20px;}*/