什么是响应式web设计
流动的运动场
如今，除了传统的PC外，很大一部分站点流量都来自移动设备，即智能手机和平板电脑。 在全球范围内，移动设备现在占Internet流量的12％ ，并且扩展速度超过了桌面Internet流量。 在智能手机普及率较高的国家，移动Web流量所占的比例足够高（例如， 美国20％的Web流量是通过移动浏览）。 此外，随着智能手机在硬件和软件方面的发展和成熟以及在南美，亚洲和非洲的普及率不断提高，预计这一数字将在未来十年中显着增长。
在过去的几年中，网站所有者已开始利用这一趋势，并且主要依靠本地移动应用来访问Facebook， Hulu和《纽约时报》等顶级网站。 此外，新兴的Web服务（例如Pulse， Flipboard等）甚至在构建网站体验之前，通过为iOS和其他生态系统构建应用程序，甚至采用了移动优先方法。 本机应用程序使开发人员可以创建独特的电话优先，触摸优化的体验，以便用户与他们的内容进行交互，以利用相机集成，地理位置和离线数据存储等功能。
在本地使用移动设备定位用户是很有意义的，尤其是在美国（超过50％的移动用户拥有智能手机） 。 尽管移动应用程序为网站所有者提供了一种以新形式与用户联系的方法，跨平台获利的新方法以及以移动场景为中心的新体验以增强用户的能力并使其用户满意，但与无处不在的开发人员相比，它们为开发人员提供了不完整的机会网络的覆盖面。 有几个问题会影响仅移动的本机方法。
问题1：支持多个平台的成本
在多个平台上创建相似的内容和体验的成本很高，并且要求网站所有者选择要优化的平台。 此外，对于从其他平台上搜索您的内容的用户来说，这意味着网站体验有限，尤其是在您需要优先进行开发投资时。
采用响应式设计的网站可以帮助解决投资成本，并确保所有最新移动操作系统中的用户都享受到持续有用的体验。
斯科特Scazafavo，在产品管理的前副总裁Allrecipes.com ，其职责包括移动产品的开发，是这样说的：
“要开发出可以与实时数据或内容（例如我们在MSN以及我以前的雇主Allrecipes.com上）提供支持的”同类最佳”产品竞争的本地移动应用程序的体面工作，通常需要至少需要约25万美元的初始投资来定义，设计和设计该本机应用程序，然后对该本机应用程序的年度维护投资为每个平台7.5万美元至10万美元，以使其不断发展（功能明智），以保持消费者的兴趣和采用度数字健康。 这超出了设计或工程创建和维护为这些产品提供动力的服务（API）所需的任何内部工作。
我们在MSN上针对带有HTML5的TMX产品（目前在IE10上可以使用的MSN.com的触摸式新版本）以及瘦壳应用程序采取的方法，以及有助于将该产品推向应用程序市场的薄壳应用程序移动浏览器，仅需要少量的初始投资即可投入我们使用内部资源来创建该应用程序产品的过程。 [该数字]可能是每个平台每个应用程序的初始投资为$ 25K到$ 50K，此后维护这些应用程序的维护成本可以忽略不计。”
同样，通过使用响应式Web设计技术， Clipboard.com能够针对许多移动小型设备浏览器，例如Windows 8上的Internet Explorer 10和iPhone / iPad上的Safari，以他们开始该项目时预期开发成本的一半进行开发。
问题2：生态系统支离破碎
即使在给定的平台内，也存在大量的设备几何形状和尺寸以及支持的平台版本。 这就要求网站所有者不仅要设计接近相似的显示器尺寸和分辨率，还要提交给多个应用商店（Kindle商店，Google Play和Nook商店，都在Android平台上）。 在同一平台内管理多个资产会增加支持矩阵的复杂性。 修复Nexus 7本机应用程序中的布局错误，然后可能需要再次针对Kindle Fire应用程序修复它。 这意味着您的所有用户都不具有相同的应用程序版本，相同的功能集和相同的错误修复。
同样（即使在iOS应用生态系统中），当发布iPhone 5时，ESPN，Spotify，Angry Birds Space和App Store本身等顶级应用程序也无法正确占据全屏 ，而是在顶部和顶部显示了一个黑条。应用程序的底部。 iPhone 5的添加要求开发人员发布应用程序更新以解决此简单的布局错误。
我们还处于供应商正在尝试新形式 （例如大屏幕）的阶段。 例如，现在有超过2500万的Xbox Live用户可以在其客厅电视屏幕上访问Internet Explorer 10，并且不仅通过指针而且还通过以人为中心的机制（例如Kinect和Xbox SmartGlass）与其进行交互。 当今的技术决策者正面临着设备分散且非常不稳定的局面，这些设备的用户已将其集成到他们的日常工作中。
统一方法：响应式网页设计
响应式Web设计旨在在市场上存在的各种设备中提供最佳的查看/消费体验- 易于阅读和导航，并且具有最小的调整大小，平移和滚动的能力，并 为那些还没来 。 已经存在各种有关个别技术的Web教程，这些技术可帮助网站提高响应速度。 本系列不仅旨在为响应式Web设计提供统一的方法，而且还旨在向决策者和开发人员留下深刻的印象，即他们迫切需要采用响应性作为其覆盖范围策略的一部分。 据顶部5000网站的抓取modern.IE ，网站只有大约14％具有某种形式的响应式设计的。 不难看出为什么开发人员认为这是一项艰巨的任务。
看一下图1。您可以看到流行的智能手机和平板电脑上的Web浏览器的相对屏幕分辨率（设备在表1中标识）。 设备分辨率以及CSS像素与硬件像素的比率（这一概念我们将在第3部分中进行解释）取自Wikipedia 。 （每个正方形对应于Web内容的100 x 100像素，以1倍光学变焦布局。）
图1.几种当前设备的分辨率采样
表1.图1的关键
| 一个 | iPhone 4 |
| 乙 | iphone 5 |
| C | 三星Galaxy S3 |
| d | 诺基亚Lumia 920 |
| Ë | HTC 8X |
| 1个 | Kindle Fire，Nook彩色 |
| 2 | Kindle Fire HD |
| 3 | LG Nexus 7 |
| 4 | Kindle Fire HD 8.9 |
| 5 | iPad和iPad Mini（不同的硬件分辨率，但CSS像素数相同，请参阅第2部分中的更多内容） |
| 6 | 微软Surface |
那么跨浏览器，跨设备的代码是解决方案吗？
传统上，特定于OS的应用程序能够提供更复杂的用户参与度，因为它们可以访问有价值的用户信息，例如地理位置，离线存储，甚至对自定义界面的自定义字体支持。
但是，现在的现代浏览器，例如Internet Explorer 10，Google Chrome（22版），Safari 6和Firefox（17版），在支持HTML5和CSS3方面提供了绝大部分的这些体验。 HTML5不是您祖父HTML，HTML5最初旨在让人们在Internet上编码和传递文本信息。 HTML5专供开发人员编写二十一世纪基于Web的丰富应用程序。 在HTML5和CSS3之间，您可以访问一次原生功能，例如媒体查询 ， 地理位置 ， 自定义字体支持 ， 离线存储甚至触摸事件 ！ 这样，您的站点在不同尺寸的硬件上可以具有不同的外观和布局，可以为用户提供位置感知服务，甚至在用户与Internet断开连接时也可以提供宝贵的体验。
HTML5神话
免费学习PHP！
全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。
原价$ 11.95 您的完全免费
有一些常见HTML5神话。 这些包括：
我无法通过HTML5获利。
HTML5网站可以说比同等的应用程序具有更多的获利机会。 今天的应用获利包括购买应用（尽管iOS应用商店中的大多数应用都是免费的，价格在0.99美元左右）。 这可能是无法直接获利HTML5网站体验的唯一方法。 否则，开发人员将对广告以及应用程序内或站点内购买进行大量控制。 更重要的是，许多应用程序倾向于限制用户可以执行的导航量。 例如，大多数阅读器和报纸/杂志应用程序提供文本内容，但不提供Web的“链接性”，这使用户可以在使用当前Web页面的同时导航到相关内容。
快速响应地实施网站体验，将保留网站的“链接”性质，并可能导致更多的用户印象。
HTML5不能离线。
HTML5提供了两种不同的解决方案，以确保用户拥有出色的离线体验。 首先，最重要的是，网页可以指定当用户断开连接时应使用其哪些资产（使用App Cache ）。 这样，即使离线，用户仍可以与页面进行交互。 此外，HTML5可以使用本地存储以及IndexedDB在本地存储用户信息和输入。 即使用户关闭浏览器，该数据仍然存在，并且可以在用户重新启动Web页面的以后的某个时间点同步回服务器。
查看此离线计算器的演示。 用户仅在第一次访问时才需要连接到Web。 随后，他可以脱机访问它。 此外，用户的计算和结果通过本地存储存储，因此他可以稍后返回并继续计算。
Mozilla hacks博客是消除有关HTML5的一些常见神话的一个很好的开端。 在这里需要特别注意的是，本机应用程序使用针对设备特定性能进行了优化的API。 但是，HTML5和CSS3为开发人员提供了工具来构建各种形式因素的引人入胜的体验，并确保您不会错过从其他平台访问的用户。
CanIUse.com是了解特定HTML5和CSS功能的可用浏览器支持的绝佳资源。
媒体查询和响应设计
CSS3中有助于响应式Web设计的新工具之一称为媒体查询 。 媒体查询使您可以为用户提供相同HTML内容，但使浏览器能够检测设备的尺寸限制（以像素为单位）并以不同的相关方式布置相同的内容。 您可以增加或缩小文本和图像内容的宽度，增加或减少报纸样式的布局中的列数，甚至完全隐藏一些信息，具体取决于您认为用户在某款产品上的正确消费体验是什么给定的设备。
通过结合媒体查询来决定内容的布局，以及通过浏览器检测来识别用户体验的其他限制（例如，如果用户正在通过大电视屏幕上的Xbox 360与站点进行交互），可以确定用户的需求，并针对用户访问您的内容的当前上下文提供正确的体验-无论是在桌面上丰富地使用它，通过触摸面板与之交互还是在浏览器上快速浏览接电话-并通过网络技术轻松地做到这一点。
最好的是，大多数现代移动设备都支持HTML5和CSS3！ 这样，您可以直接在浏览器中创建近乎原生的体验。 缺乏DRM支持或对某些设备专用硬件的访问权限，通过HTML5，CSS3和JavaScript可以提供的体验种类是无限的。 查看复古的Atari视频游戏，以了解您可以纯粹使用符合标准的Web技术构建的酷体验。
应该注意的是，仅使用媒体查询来为您的网站构建三种不同的固定宽度布局，无疑可以帮助您确定当今常见的屏幕尺寸（例如，台式机，平板电脑和电话）。 但是， 这并不是真正的响应式Web设计 。 它不能为使用宽度中等的设备访问您的站点的用户提供最佳体验，也不能为下一轮具有新几何形状和尺寸的“ it”设备浪潮做准备。
建立一次！ 部署一次！
如果您选择投资于网站体验，则可以设计单个HTML5，CSS3和JavaScript体验，这些体验可以在各种尺寸范围内扩展，从小型智能手机触摸屏到大型电影院显示器或电视机。 我们将在本系列后面的部分中详细介绍实现细节，但是这里值得注意的是，您不必选择要使用该炫酷的新功能或使用该高安全性补丁进行保护的用户。
除了简化代码库和支持矩阵之外，它还具有以下优点。
好处1：不让任何用户落伍
赌上用于一个或两个顶级移动平台的强大本机应用程序可能意味着，如果某些用户在所有平台上都提供了有用的Web体验，并且覆盖面更广，则可以迁移到竞争对手。
好处2：统一广告素材
通常，当网站依靠广告来赚钱时，它们会与业务伙伴互动，并根据用户体验的是成熟的Web版本还是受限的应用版本，零碎出售广告。 此外，移动设备上的广告的点击率低于台式PC上的广告，在这种情况下，与合作伙伴互动，为本地应用创建广告资产以及出售针对应用的广告房地产的额外费用并不能证明获得额外收益。 例如，MSN.com（现已开始在其国际市场上推出一个基于媒体查询的统一HTML5网站）现在可以统一其在所有设备类型上的广告合作伙伴关系。
凭借一次HTML5体验，该体验可响应地缩放到不同的外形尺寸，您可以在客厅，办公桌上和旅途中，在各种设备上为具有相同广告资源集的单个广告客户提供服务。
好处3：将您的网站体验直接升级到您的应用程序体验
有时，您可能仍然遇到障碍，想要利用用户独特的硬件为用户提供出色的移动体验，例如，希望用户通过摇动手机从您的站点中获取新内容。 在这种情况下，您需要访问设备加速计。
好了，好消息是，您可以通过在网站内容周围应用包装器来创建本机应用程序，而仅编写必要的本机应用程序代码即可与手机上的其他硬件进行交互。 例如，您可以在iPhone上的WebViewController中托管（按比例缩小的网站内容）您的网站内容，并仅在Objective-C本机代码中侦听加速计事件。
这意味着，对于您在Web层中构建的任何修补程序/功能，您都无需麻烦进行应用程序升级！
“那么，我该如何开始？”
在这一点上，我们还没有讨论响应式Web设计的“方法”。 我将在本系列的下一部分中谈到这一点，但是我希望您有机会考虑一个解决方案的长期利益，该解决方案由一个单一的代码库（用熟悉的Web技术，对开放JavaScript库的支持不断增长，丰富HTML5设备集成以及高质量CSS3布局和图形支持。 如果没有，您总是可以回顾一下图1中Swift增加的设备列表。
翻译自: https://www.sitepoint.com/why-the-web-is-ready-for-responsive-web-design/
什么是响应式web设计
432
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
