响应式网站设计

响应式网站设计是一種(zhǒng)网络页面(miàn)设计布局，其理很黑念是：集中创建页面(miàn)的图片排版大小，可以智能(néng)地根据著林用户行为以及使用的设备环境進(jìn)行相對(duì)应的布局。

设计理念

此概念于2010年5月由國(guó)外著名网页设计师Etha銀秒n Marcotte所提出。

响应式网站设计(Responsive Web design)鄉的的理念是：

页面(miàn)的设计与開(kāi)發(fā)应当根据用户行为以及姐山设备环境(系统平台、屏幕尺寸、屏幕定向(xiàng)等)進(jì聽睡n)行相应的响应和调整。具体的实践方式由多方面(miàn)组成(chéng讀懂)，包括弹性网格和布局、图片、CSS media query的使個雨用等。无论用户正在使用笔记本還(hái)是iPad，我们的页面(mi筆西àn)都(dōu)应该能(néng)够自动切换分辨率、图片尺寸及相关脚本功能北為(néng)等，以适应不同设备；换句话說(shuō)，页面(m用裡iàn)应该有能(néng)力去自动响应用户的设备环境。响应聽樂式网页设计就(jiù)是一个网站能(néng)够兼容多个终端——而不是为見男每个终端做一个特定的版本。這(zhè)樣(yàng)，我们就(jiù)間的可以不必为不断到(dào)来的新设备做专门的版本设计和開(kāi)發(fā)了秒答。

历史

Ethan Marcotte 在他在A List Apart的文章中發(fā門化)明了术语 Responsive Web Design (RWD)。有爸他在他 2011 年关于這(zhè)个主题所写的简短的书中描述了响应式网页设還都计的理论和实践。响应式设计被(bèi).net 杂志列为 2012 年顶级近鐵网页设计趋势的第二名 (渐進(jìn)增强是第一名)。他们也道街列出了 Ethan Marcotte 最喜欢的响应式站点之中的20个。

提出

Ethan Marcotte曾經(jīng)在A List 光書Apart發(fā)表過(guò)一篇文章"Respon師風sive Web Design"，文中援引了响应式建筑设计的概可對念：现出现了一门新兴的學(xué)科——"响应式架构(學北responsive architecture)"——玩謝提出，物理空间应该可以根据存在于其中的人的情况進(jìn)行响应。结合嵌說森入式机器人技术以及可拉伸材料的应用，建筑师们正在尝试建造一種(zh微動ǒng)可以根据周围人群的情况進(jìn)行弯曲、伸缩和扩展銀計的墙体结构；還(hái)可以使用运动传感器配合气候控制系统，调整室頻房内的温度及环境光。已經(jīng)有公司在生产"智能(néng)玻璃少日"：当室内人数达到(dào)一定的阈值時(shí)，這(zhè子村)種(zhǒng)玻璃可以自动变为不透明，确保隐私。

將(jiāng)這(zhè)个思路延伸到(dào)Web设计的领域，要年我们就(jiù)得到(dào)了一个全新的概念。为什麼(me)一定農花要为每个用户群各自打造一套设计和開(kāi)發(fā)方案？和服外响应式建筑相似，Web设计同樣(yàng)应该做到(dào)根据不同设备环湖工境自动响应及调整。

显然，我们无法也无需使用运动传感器或是机器人技术，响应式Web设计更農看多需要的是抽象思维。好(hǎo)在，一些相关的概念已經(jīng)得到(d男說ào)了实践，比如液态布局、帮助页面(miàn)重新格式化的media q但這ueries和脚本等。但是响应式Web设计不仅仅是关于屏幕分辨率自适应以匠北及自动缩放的图片等等，它更像是一種(zhǒng)對(duì)于设计的全新思维模白可式。

技术手段

一切弹性化：

我们通過(guò)响应式的设计和開(kāi)發(fā)思路让页這志面(miàn)更加"弹性"了。图片的尺寸可以被(bèi)制相自动调整，页面(miàn)

液态图片技术

液态图片技术

布局再不會(huì)被(bèi)破坏。虽然永远沒(méi)有最知海合适的解决方案，但它给了我们更多选择。无论用户切换设备的屏幕定向(兵路xiàng)方式，還(hái)是从台式机屏幕转到(dào)iPad上浏览，页睡慢面(miàn)都(dōu)會(huì)真正的富有弹性。

通過(guò)液态网格和液态图片技术，并且在正确的地方使用了正确的HTM也會L标记。

响应式图片：

响应式图片技术思想：不仅要同比的缩放图片，還(hái)要在小设备上明風降低图片自身的分辨率。這(zhè)个技术的实现需要使用几个相关文件慢河，我们可以在Github上获取。包括一个JavaScript文件(r麗讀wd-images.js)，一个.htaccess文件，以及一些麗湖范例资源文件。大致的原理是，rwd-images.js會(huì)检测件去当前设备的屏幕分辨率，如果是大屏幕设备，则向(xiàng)页面(mi個路àn)head部分中添加BASE标记，并將(jiāng)後(hòu)续的綠動图片、脚本和樣(yàng)式表加载请求定向(xiàng)到(dào討會)一个虚拟路径"/rwd-router"。当這(月匠zhè)些请求到(dào)达服务器端，.htacces文件會能工(huì)决定這(zhè)些请求所需要的是原始图片還(hái)是小尺女讀寸的"响应式图片"，并進(jìn)行相应的反馈输出。對農慢(duì)于小屏幕的移动设备，原始尺寸的大图片永远不會(huì)被(空日bèi)用到(dào)。

趋势

响应式设计在2012年被(bèi)提的比较多，但是响应式设计仍然在不大一断变化，不断创新。比如，新的设备不断出来(iPad Mini)，這多聽(zhè)让以前的设计想法土崩瓦解。而各種(zhǒng)Web的响应式设用書计也获得了越来越多的注意，“让人们忘记设备尺寸”的理念將(jiāng)更快地老做驱动响应式设计，所以Web设计也將(jiāng)迎来更多的响应式设计元素拍章。

UIKit

UIkit 是一个轻量级、模块化的前端框架，可快速构建强大的web前端界面(m朋在iàn)。它根据不同的屏幕分辨率与上网设备，會(huì)自动做出响应雨長，提供一致的体验。

Bootstrap

由兩(liǎng)个Twitter员工開(kāi)發(fā)并開(kāi)源放相的前端框架，已經(jīng)更新到(dào)了v4.1.2版本，在Githu自信b上非常火爆，在國(guó)内也有很多粉丝，值得一试。

Adobe Edge Inspect

對(duì)移动開(kāi)發(fā)者尤其有用的工具，其前身是 Adobe師森 Shadow，用于帮助设计师和開(kāi)發(fā)者同時(體老shí)在多个移动设备上预览应用设计，發(fā)现和解决跨平台问题。

Responsive Web Design Sketch S兵議heets

如果你還(hái)在用纸和笔来创建你的实体模型，你可以用這(zhè)些现有的女行草图来设计你的交互网站了。

Foundation

号称是世界上最先進(jìn)的响应式前端框架。

SimpleGrid

轻量级的响应式 CSS 网格系统，让你可以快速创建适应于手机和平板电脑的不分网站。

Responsive Testing

這(zhè)个工具可以让你预览你设计网页在不同设备上的效果，只需要访问它的网師鐵站并输入你网站的地址就(jiù)可以看到(dào)了。