响应式Web开发作为标准，循序渐进_极简慕枫

对于每个新客户端和新项目，似乎移动设备之间的兼容性请求正在上升。智能手机的普及程度已经达到顶峰，而iPad，Kindles和其他中型手持设备等设备的普及程度几乎也是如此。我们不需要强调移动友好型网站的重要性，以及响应式设计如何帮助解决问题; 那是给定的。西安做网站

我们现在正处于如何在几乎所有项目中包含响应式设计概念的时代。今天似乎一个在多种屏幕尺寸上工作的网站并不是“奢侈品”，而是一种必需品。因此，作为开发人员，我们如何将灵活且响应迅速的Web开发包含在我们的所有项目中，既轻松又作为标准？

在本文中，我们将讨论如何让更多人将响应式编码作为Web开发的新标准，以推动下一代Web时代。

响应式Web开发作为标准

它仍然是一项高级服务

越来越需要让我们所有的网站都做出响应，不仅是为了获得更好的用户体验，还为了更好地维护网站。但是，对固定宽度设计进行编码所需的时间，精力和策略要远远少于响应路由。虽然我们可以更加熟悉标准化和加快响应式网站编码过程的方法，但我们必须始终记住，创建智能，响应式网站仍然是一项优质服务，无论多么常见，都应该这样对待它。变。

如果您在日常练习中开始使用响应练习，那么不要害怕相应的收费。同时向客户表达，这是您的标准做法，也正是为什么。向客户展示如何通过响应式设计解决他们的问题。响应式设计非常适合将网站的多个版本集成到一个实现中：移动设备，平板电脑，桌面设备，通常更多。响应式编码也是一个专业领域，就像任何其他Web开发领域一样。

简单响应式设计的基本步骤

完全规划和实施的响应式网站需要时间 - 在设计，开发和测试阶段之间。有很多关于最佳实践，设计工作流程以及其他主题的深入文章，但这超出了本文的范围。客户（或您作为设计人员/开发人员）是否想要了解所有这一切取决于您，但无论有没有这些，我们都可以开始实施响应式设计，至少在某些小方面。

有时候，只需要使用一些基本的，标准的步骤来实现更灵活的设计，而无需额外的计划。

第1步：包含正确的视口
许多移动浏览器将自动缩放网站以适应屏幕宽度。这对于固定宽度设计非常有用，因为它允许用户以正确的比例查看网站，但也有很多缩放，滚动和挫折。即使使用灵活且响应灵敏的代码，许多移动Web浏览器也会缩小网站，认为它是正确的视图，当然，无论如何都不会应用响应式规则。移动浏览器只是将其视为网站的大版本，按比例缩小。

通过灵活的响应式设计，在标签之间包含以下元标记，移动浏览器将网站缩放到文字宽度。

如果您可以选择在多个移动设备上进行测试，您可能还会注意到另一个奇怪的事情：像素不是像素。Android，Windows Phone，Apple Mobile等都以不同方式解释像素的宽度，因此即使使用上述视口，也可能无法设置正确的网站比例。

要解决此问题，我们可以使用viewport的  targetdensitydpi 属性强制设备dpi与Mobile Safari的匹配：

还有缩放问题吗？您可以随时使用一些精确的dpi设置。Mobile Safari无法解释此代码并将忽略它，因此最好将Apple设备作为标准，并相应地进行调整。

第2步：添加支持
虽然我们都喜欢通过IE浏览器，旧设备，甚至是窗外的旧浏览器，但我们仍然需要适应跨浏览器的兼容性。我最近在商业博客上看到客户不应该为响应式设计支付额外费用。原因？大多数浏览器还不支持CSS3媒体查询和HTML5，用于响应式设计。

该帖子认为为响应式设计付费浪费了时间和金钱。不要让这样的无知毁了网络的未来！通过一些JavaScript，我们可以使IE支持响应式设计，并确保教育客户，绝大多数移动浏览器支持并可以理解该技术。当然，首先使用这些支持的移动浏览器是响应式设计背后的原因。

请在下方添加Google托管代码段，以便IE8及其下方了解CSS3媒体查询。

还有其他插件可以帮助支持响应式开发概念。大多数人都做了与上面相似的工作，但随时可以在评论中讨论其他人在那里和你的偏好。

第3步：响应元素（更多JavaScript）
大多数响应式开发可以而且应该基于灵活的宽度和CSS和智能标记的重新排列。然后可以引入CSS3媒体查询以获得一些额外的帮助，最后，最后一些可以包含一些JavaScript。大多数浏览器当然都启用了JavaScript，它可以通过制作视频，iFrame（通常用于嵌入）和更具响应性来帮助，同时帮助CSS灵活元素（如图像）以更智能的方式响应。

响应式插件和应用程序

以下是我喜欢的响应式设计的一小部分。如果您已经进入响应式开发一段时间，您可能已经听说过它们。它们不是必需的，但是一个好主意。

响应式图像
此插件不仅可以在视觉上创建宽度调整的灵活图像，而且还只会自动加载小型，中型或大型图像。对于功能较弱或带宽较少的移动设备，可以下载较小的图像文件。

FitVidJS
超出图像的灵活媒体可能很棘手。当然，有一些不同的CSS技巧可以帮助，但由于不同的平台处理视频的方式不同，因为有很多不同的视频实现（嵌入/ iFrames，Flash，HTML5视频等），一个最有效的插件这项工作可能非常有益。

Elastislide
旋转木马可能很难做出反应，但Elastislide做得很好。有一些更灵活/反应灵敏的旋转木马可用，但这是迄今为止最好的之一。

BackStretch
这是一个漂亮的小插件，通过保持全宽和高度，没有限制，没有扭曲，使背景图像响应。

jQuery Mobile
jQuery Mobile是一个使用HTML5，jQuery UI的框架，包括特定于移动设备的jQuery事件，可以在众多移动设备上创建更好的用户体验。

其他提示

通过逐步开始项目的方法，为响应式设计建立基本结构并不是那么困难。响应式设计可能需要更多时间，但总体而言，这是一种很好的做法，可以节省长时间的时间。随着一切，响应式设计技术和开发时间都可以通过经验和一些提示进行改进。

1.从移动优先设计/开发
利用所有基本元素，可以轻松地从头开始创建响应式开发，而且只需最少的额外工作。许多开发人员会发现确保智能标记的最简单方法，而完全转换布局的CSS则首先从移动开始。如何在移动设备中首先布置标记，然后扩展到每个更广泛的视图？当屏幕宽度扩大时，可以制作什么CSS？

一些开发人员将以相反的方式从桌面到移动工作，这非常好 - 无论什么工作，对吧？没有固定的规则; 很简单，许多开发人员发现首先使用移动设备更容易。

首先为移动设备开发对于某些人来说可能更容易，因为它更容易适应增加的空间，而不是考虑在更少的空间中重新安排的方法。从较少开始，然后添加更多。

2.不要被带走，使用经典的灵活布局
响应式网站是一个新概念，它很容易被最新的技术和工具所包含，以实现它们。但是，对于旧版浏览器来说，使用“经典”灵活布局的方法更加实用和安全。在某些时候需要媒体查询，但对于响应式设计的核心，使用简单百分比宽度的功能，通过CSS“显示”基于可用空间显示内容，以及基于em的字体间距和大小调整。

下面的图像示例显示了响应式设计背后的大部分工作如何在没有特殊CSS或JavaScript的情况下完成，并且可以在更多的浏览器和平台中正常工作。它只需要一个手机宽度，或者可能是一个非常小的平板电脑，CSS3媒体查询必须进来。

3.渐进式增强
当然，我们喜欢我们所处的领域，因为尝试新技术和工具会很有趣。在使用响应式设计时可以使用它们，首先要记住兼容性非常重要，然后我们可以使用渐进增强的思维模式进行实验。

随意使用新的和有趣的技术，或随意发展自己的技术。使用更传统的方法，例如常规的灵活布局和智能的跨浏览器兼容的标记和CSS对于响应式设计的基础非常重要，而更多的应该是额外的，允许缓慢但肯定地采用新技术。

结论

当然，在未来的几年中，响应式设计将在我们作为开发人员和设计人员，以及客户和企业之间获得更多的主流认可。有了这个，新的技术和工具也将出现，但重要的是要记住响应式设计的基本结构和概念，以确保为几乎每个人提供良好的用户体验，因为我们每个人都采用更新的小工具，技术，移动设备，以及不同的费率。

随着网络技术现在以最快的速度发展，我们应该学会采用响应技术作为标准实践，而不仅仅是一个额外的好处。作为一个社区，我们必须始终以我们对其实践的思考方式，以及从今天开始如何更好地响应式设计。

西安做网站