随着设备数量和屏幕尺寸的增加，响应式设计已成為(wèi)标准协议。  PC和移动Web设计的兼容性测试对于确保用(yòng)户无论其访问方式如何都能(néng)导航并轻松访问内容至关重要。

  就像网页设计领域的几乎所有(yǒu)事物(wù)一样，关于如何针对较小(xiǎo)的屏幕进行设计也有(yǒu)不同的想法。 但是，除了这些差异之外，我们还应牢记一些响应式设计原则。

1.可(kě)读性和可(kě)用(yòng)性至上

  每个人都希望他(tā)们的设计在每个屏幕上看起来都漂亮。 但是，在移动领域尝试太花(huā)哨是危险的。 在台式机上看起来漂亮的高端布局或功能(néng)可(kě)能(néng)对電(diàn)话没有(yǒu)意义。 在适当的地方，需要简化。 如果事实证明某个特定元素在小(xiǎo)屏幕上太笨拙，您将不会后悔删除它或将其替换為(wèi)更有(yǒu)效的工作。 就排版而言，移动网页设计的大小(xiǎo)和对比度同样重要（如果不是更多(duō)的话）。 在阅读長(cháng)篇文(wén)章时，即使使用(yòng)高质量的手机屏幕，凝视仍然有(yǒu)些无聊。 确保文(wén)本大小(xiǎo)正确，并设置行距和边距以帮助提高可(kě)读性。 结论是，桌面用(yòng)户在可(kě)用(yòng)性方面所做的相同努力也应集中在使移动體(tǐ)验成為(wèi)出色的體(tǐ)验上。

  2.使用(yòng)可(kě)用(yòng)的屏幕空间

  多(duō)列布局无处不在，但是文(wén)本密集型列通常不适用(yòng)于最小(xiǎo)的屏幕。 在这种情况下，将多(duō)列简单地转换為(wèi)单列是有(yǒu)意义的。 但是，当我们谈论平板電(diàn)脑甚至手机水平放置时，该栏仍然非常有(yǒu)效。 关键是值得花(huā)些功夫看看我们如何才能(néng)最好地利用(yòng)现有(yǒu)的屏幕资源。 很(hěn)多(duō)次，我们一直跳过这些中间分(fēn)辨率，而只关注最小(xiǎo)和最大的视口解决方案。 例如，在同一视图中，以纵向放置的平板電(diàn)脑应不同于以手机放置的手机。 实施此类策略的一种更简单的方法是使用(yòng)CSS Flexbox。 正确配置后，通常可(kě)以自动為(wèi)当前视口提供最佳布局。 您可(kě)能(néng)需要通过媒體(tǐ)查询进行一些小(xiǎo)的调整，但是值得进行一些其他(tā)调整。

  3.一切不必完全相同

  容易陷入将单个设计元素放置在与移动和桌面视口相同的相对位置的陷阱中。 尽管对一致性的要求值得称赞，但这种方法有(yǒu)时在较小(xiǎo)的屏幕上适得其反。 例如，许多(duō)网站在其标题中放置了诸如搜索表单或社交媒體(tǐ)图标之类的项目。 在较大的屏幕上，它运作良好，但通常会阻碍手机的主要内容。 在辅助页面上尤其如此，用(yòng)户可(kě)能(néng)实际上只是想阅读页面上的文(wén)本而不必担心所有(yǒu)额外的垃圾。 除了将这些类型的项目粘贴到网站标题上之外，还有(yǒu)许多(duō)选项。 您可(kě)能(néng)考虑将这些项目塞入一个按钮，该按钮根据用(yòng)户要求显示它们。 或者它们可(kě)以成為(wèi)您实现的任何移动导航解决方案的一部分(fēn)。 同样的事情可(kě)能(néng)适用(yòng)于侧边栏之类的功能(néng)。 其他(tā)元素可(kě)能(néng)被完全隐藏。 同样，媒體(tǐ)查询（可(kě)能(néng)还有(yǒu)一些条件代码）也可(kě)以将这些项目放在移动设备上更合适的位置。 最好决定要去哪里。

4.添加移动设备特定的功能(néng)

  在考虑响应式设计策略时，您可(kě)以考虑添加一些技巧，以為(wèi)移动用(yòng)户带来更高级别的便利。 这些项目通常不需要额外的努力即可(kě)实施。 但是它们可(kě)以大大提高可(kě)用(yòng)性。 在支持触摸功能(néng)的设备上浏览可(kě)能(néng)会带来台式机用(yòng)户不必面对的挑战。 对于一个人来说，必须从更長(cháng)的页面向上滚动以返回主导航是移动设备上的主要挑战。 您可(kě)以通过使用(yòng)导航功能(néng)（在检测到用(yòng)户向上滚动时自动显示）来在某种程度上缓解这种情况。 另一种选择是在每个页面的底部都有(yǒu)一个很(hěn)好的旧“返回首页”链接。 对于鼓励電(diàn)话的企业，单击“呼叫”按钮可(kě)能(néng)是受欢迎的功能(néng)。 这可(kě)以采用(yòng)传统按钮的形式，该按钮的字面意思是“立即致電(diàn)我们”，或提及整个站点超链接的電(diàn)话号码。 本质上，您可(kě)以考虑帮助移动用(yòng)户与组织进行交互的所有(yǒu)措施。

  5.移动问题

  自适应设计是一个强大的工具。 我们可(kě)以使用(yòng)它在几乎所有(yǒu)设备上為(wèi)用(yòng)户提供最佳體(tǐ)验。 但是作為(wèi)设计师，我们必须充分(fēn)利用(yòng)这些可(kě)能(néng)性。 首先，最重要的是确保移动用(yòng)户可(kě)以轻松浏览和导航您的站点。 从那里，做出有(yǒu)关外观和工作方法的最明智的设计决策。 如果您使用(yòng)户满意，他(tā)们将更有(yǒu)可(kě)能(néng)再次回来。