响应式网页开发设计在实际中的应用

时间：2023-09-10 19:36:01 | 来源：网站运营

时间：2023-09-10 19:36:01 来源：网站运营

响应式网页开发设计在实际中的应用：在这个手机、ipad层出不穷的时代，对于网站来说根本不可能为每种设备都开发个版本出来，没有一个统一的标准，我们又不想失去任何一个用户，这可苦了我这些设计师了，需要付出更多的心血来获得更好的体验。

响应式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及其他一些智能手机、平板电脑，用户还 可以通过转动设备来任意切换屏幕的定向方式。

怎样才能做到让一种设计方案满足所有情况？




要想做到同时兼容横、竖屏(用户还有可能在页面加载的过程中切换方向)，我们就必须考虑N种屏幕尺寸规格。

我们可以将这些规格划分为几个大类，然后为每一类做一种方案，确保该方案至少在本组中尽量具有弹性。

但即使这样，结果也将是非常不爽的，谁知道某类设备在5年之后的 占有率是多少？而且很多用户甚至不去将浏览器的窗口最大化。

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




在08年之后，更多更有代表性的新设备问世并普及了。

显然，我们不可以沿着“多方案”的思路继续走下去；那么我们应该怎样做呢？

1、触屏与鼠标




触屏设备已经成为主流。虽然目前多数触屏设备还是小屏幕类型的产品，比如手机，但是市场上越来越多的大屏幕设备也开始使用触屏技术；且不说iPad一类的平板电脑，就连一些笔记本和台式机也加入了这一行列。

比如HP Touchsmart tm2t，即使用传统的键鼠设备，同时也加入了触屏技术。

相比于传统的基于鼠标指针的互动，触屏技术显然带来了截然不同的交互方式与相应的设计规范；两者又有各自所适用的领域。

所幸，要使我们的设计方案同时满足这两类设备的规范，并非一件难事，只是有些地方需要注意。

比如，触屏设备无法反映CSS定义的hover行为及相应的样 式，因为它没有鼠标指针的概 念，手指点击就是click行为。所以不要让任何功能依赖于对hover状态的触发。

2、响应式图片




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

这个技术的实现需要使用几个相关文件，我们可以在Github上获取。包括一个JavaScript文件(rwd-images.js)，一个.htaccess文件，以及一些范例资源文件。

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

响应式web设计并不是最好的，这只是个单纯的概念，它可以有效的提高用户体验但是却不能彻底解决。我们要面对不断出现的新设备出现，找出一个更好的解决方案，不断的改善用户体验。

易点科技成立于2009年，一直专注于IT顾问咨询、信息平台系统开发、企业网络方案解决与运营。服务内容包含pc+手机响应网站建设、B2C购物商城定制开发、微信公众号定制开发、企业管理小型系统定制开发。拥有先进的网页设计制作理念、可靠的质量保障体系。十年专注！已服务过数百家知名品牌企业,积累了众多行业标杆级的经典案例。

原文来自：https://www.edh5.com/news-det-348.html