响应式Web设计：是否在每个设备上下载相同数量的数据？

我想在wordpress上重新设计博客和网站，以适应不断增长的移动用户和平板电脑用户。

我也听说过响应式设计。我想知道响应式网页设计是否在计算机屏幕以及移动设备上下载相同数量的数据？

我还看到许多大型营销公司尚未对响应式网页设计进行投资，而仍在寻求针对移动设备进行优化的单独网站。那么，响应式网页设计或针对移动设备进行了优化的单独网站，我该怎么做呢？

如Ethan Marcotte在ALA 306中定义的那样，术语“响应式设计”是指根据用户屏幕尺寸将不同的样式规则应用于HTML的技术。有关响应式设计的更多说明，这是Mike Bollinger撰写的精彩文章。

在此模型中，无论屏幕大小，您都将完全相同的HTML发送给客户端。但是，如果对于某些屏幕分辨率未显示CSS中引用的资源（主要是图像），则可能无法下载。例如，对于大屏幕，您可以high-res.png在CSS中使用，对于小屏幕low-res.png-Web客户端可以选择仅以活动样式下载图像。（请参阅@DBUK的注释，以了解至少一个当前正在下载这两个客户端的重要客户端！希望这些客户端能够变得聪明起来！）

在您的情况下，此技术可能很有意义，或者创建单独的移动网站可能更有意义。

不同的设备可能意味着不同的使用上下文。手机始终在您的口袋里-用户将如何在杂货店使用您的网站？您想将整个网站发送给他们吗？还是只有几个功能？还是完全不同的功能？如果他们坐在沙发上看电视随便看iPad怎么办？

移动设备往往具有较慢的处理器，较少的内存和较慢的连接速率（顺便说一句，所有这些“真相”每年都变得不那么真实）–您可能出于性能原因而希望单独发送一个单独的移动站点。

我敢冒险地说，一般而言，网站（即博客）的静态性，文本性和内容驱动性越强，则使用现有HTML和响应式设计的机会就越大。站点（即商店）的交互性，多媒体性和用户驱动性越强，您应针对个别设备类型定制单独的站点的机会就越大。

另外，不要忘记在当今时代，移动体验应该是网站还是应用程序也是一个问题。

响应式设计不应在每个设备上下载相同数量的数据，因为并非所有设备都具有相同的多媒体要求。与台式机/笔记本电脑/平板电脑的网站相比，移动网站应使用低分辨率图像，并且本质上应图形化程度较低。而且，如果您想将移动网站和常规网站结合在一起，则需要考虑到这一点，否则您的网站响应速度不是很好吗？

slidedeck peteorpeter链接提到了Filament Group 的“ 响应图像”脚本，该脚本使您可以使用JavaScript为适当的设备提供合适尺寸的图像，理想情况下无需下载多个版本。对于布局图像资产，通常可以通过媒体查询完成此操作，该媒体查询针对不同的屏幕分辨率指定不同的样式。

我认为许多公司需要很长时间才能更新其网站，该死的，仍然有一些使用表格的公司。响应式和移动优先方法绝对是当下的流行语。

正如上面提到的那样，您应该在手机/低分辨率设备上使用低分辨率图像。媒体查询将帮助您定位所有较低的分辨率。但是，我听说移动浏览器会忽略display：none规则，并且还会下载图像的桌面版本。另外，如果沿着响应图像路线走下去，它将给移动处理器带来很大压力-每1像素3字节...我认为。有很多解决方案可以避免下载额外的内容-一些非常hacky- https: //docs.google.com/spreadsheet/ccc ? key = 0AisdYBkuKzZ9dHpzSmd6ZTdhbDdoN21YZ29WRVdlckE &hl=zh_CN# gid =0

有关响应式Web设计的弊端的一些信息，请访问http://www.webdesignshock.com/sensitive-design-problems/。但是，不要让该博客文章使您失望。另一本书一书就此主题撰写了精彩的书-http: //www.abookapart.com/products/sensitive-web-design。绝对值得抓住电子书版本。