响应式网站设计：概念及使用指南

发布：2022-01-11 13:34:03 浏览：2336

   眼下，几乎所有的新客户都希望Web设计师和开发者给自己的网站设计专门的移动版本。最好是黑莓、iPhone、iPad、. 上 网本还有Kindle各自都有一款，另外屏幕分辨率还都得兼容。接下来的几年里，我们可能还会为数不清的新移动终端开发设计，而这种疯狂何时才是尽头呢?甭想了，它根本没有尽头。在网站设计与开发领域，我们会越来越跟不上新分辨率和新设备更新换代的步伐。对于许多网站而言，为每个分辨率和新设备开发一个网站版本几乎是不可能的，或者说是不切实际的。我们可能会顾此失彼，在保证某个设备的用户群的同时，失去了使用其他设备的用户。有别的更好的办法么? 响应式网站设计的理念是网站页面的设计与开发应该根据用户的行为和基于用户的屏幕大小、系统平台和屏幕方向的使用环境作出相应的回应。具体操作则包括弹性网格、布局、图片和CSS媒体查询的灵活使用，等等。用户从笔记本切换到iPad时，网页应该自动调整应对所用设备的分辨率、图像大小和脚本功能。换句话说，网站应该有这样的技术能力，随时随地回应用户的需要。这样我们就可以不用为层出不穷的新设备做专|门的设计与开发了。响应式网站设计的概念关于这个设计理念，EthanMarcotte曾在A List Apart.上发表过一篇文章- -Responsive Web Design。它来源于响应式建筑设计理论，即某个空间随着内部人群的流动和数量而自动调整。最近出现了一门新兴的学科，即“响应式建筑”，该学科开始探索物理空间该如何对空间里来回的人做出反应。结合嵌入式机器人和抗拉材料，建筑师们正尝试建造一种艺术化的墙体结构，它可以根据周围人群的情况进行弯曲、伸缩和扩展。在人群进入室内的时候，运动传感器可以配合气候控制系统，调整室内温度和灯光氛围。已经有公司生产出了“智能玻璃”，当室内人数达到一定密度值时，玻璃会自动变成不透明，增强隐私保护。将此思路延伸到网站设计中来，我们就得到-个相似但又是全新的概念。我们为什么要为每个用户群打造个性化的设计?毕竟，建筑师们不可能根据每次来访人数不同而重新设计建造出新建筑来。和响应式建筑同理，网站设计也要做到自动调整，而不是为每个新用户群创造出难以计数的个性化方案。显然，我们不能依靠运动传感器或机器人，就像建造大楼那样来设计网站，响应式网站设计看重的是抽象思维。不过，有些概念已在实践中操练过，比如液态布局、能够轻松(或自动)重新格式化页面的媒体查询和脚本。但是响应式网站设计不仅是关于设计可调屏幕分辨率和可自动缩放的图像，它更是一种全新的设计思维模式。下面我们来谈谈操作过程中的这些功能特征以及其他相关概念。
调整屏幕分辨率
不同的设备，其屏幕分辨率、清晰度以及屏幕方向都各自不同。每天都有各种新设备诞生，随之而来的是不同的屏幕尺寸，而且每个设备或许都能兼容各种尺寸、功能甚至是颜色。有的是横屏，有的是竖屏，甚至还有正方形屏幕。而随着iPhone、iPad以及 高级智能手机的流行，许多新设备都可以随意进行横屏竖屏切换。怎样的设计才能满足上述所有情况呢? 除了横屏竖屏(同时确保用户在页面加载过程中就能切换自如)的兼容问题，我们还要考虑到千变万化的屏幕尺寸。当然，我们可以给这些尺寸归类，然后每一-类对应一种设计方案，并尽力确保每个设计的灵活性。但即便如此，任务也还是会繁重不堪，何况谁知道五年之后其使用数量会是怎样?而且许多用户甚至不会去最大化浏览器窗口，光这一点就让屏幕尺寸的变数更大了。
   部分解决方案:一切弹性化
几年前，弹性布局(flexible layout)对网站而言几乎是一种奢侈品，当时唯一的弹性设计只是在布局安排和字体设计方面。图片动不动就破坏页面布局，而且即使是那些弹性结构元素，在极端情况下，也会破坏布局一-它们可以有几百像素的变化，可一旦从电脑大屏幕切换到上网本时常常就无法调整。
           现在，我们可以做到更大的弹性化。图片尺寸可自动调整，而且我们有应对方案可以保证页面布局不会遭到破坏(尽管在此过程中它们可能会被压缩且难以辨认) 。虽然这不是一劳永逸的办法，但却给了我们更多的选择。设备横屏竖屏可以瞬间切换，也能满足较大的电脑屏幕切换到iPad。
   在前文提到的Ethan Marcotte的文章中，他通过网站设计实例展示了这个更灵活的页面布局。