随着移动网络以稳定的速度增长并且谷歌确认它根据页面的响应能力对页面进行排名，因此您的网站能够适应各种不同的设备和屏幕尺寸至关重要。

但是响应式网页设计不仅仅是简单地拉伸或挤压您的布局以适应。 它是关于以多种不同方式交付单个网站，同时保留内容和功能。

考虑到这一点，这里有七个响应式网页设计的最佳实践技巧。

1. 思考响应

当响应式网页设计开始时，设计师开始计划最大的屏幕，然后缩小直到它们达到最小。 很多时候，它们包含的花哨元素无法很好地分解以适应较小的屏幕，这导致移动版本成为原版的淡化副本，感觉有点像是事后的想法。 今天，移动设备构成了许多网站的最大流量，因此移动用户期望并且应该得到与其他用户相同质量的浏览体验。 但这并不意味着更大的屏幕尺寸也应该被忽略。 很多人仍然使用大桌面，甚至更多人整天在不同的屏幕之间跳转。

解决这个问题的最好方法是采用“移动优先”的方法，首先为最小的屏幕进行设计，然后在增加屏幕尺寸时根据需要添加元素。

专注于为流行的断点设计，但也要考虑到两者之间的差距——每天都有新设备进入市场，而今天几乎不使用的屏幕尺寸可能会成为下个月的新热点。 请记住考虑以纵向模式使用平板电脑的人——这可能会被忽视，最终看起来像一个被压扁的桌面或一个浪费大量空间的基本移动布局。

2.注意内容

不要陷入“适合大小”方法的陷阱，在这种方法中，您的重点是在不考虑其上下文的情况下将所有元素安装到页面上。 首先专注于最重要的内容和功能，并对哪些元素面临挑战采取残酷的态度。 当您向上移动不同的屏幕尺寸时，请在每个阶段质疑它们的包含 - 如果您必须考虑太久，它可能不需要存在。 明确所需的内容和功能后，就可以开始布局了。 各种各样的屏幕尺寸意味着“首屏”的传统概念几乎已死。 人们习惯于滚动——Facebook 和 Twitter 等网站的出现已经见证了这一点——因此，以鼓励滚动的方式设计您的网站，但将最重要的信息保留在屏幕顶部。 这包括联系方式、CTA 和电子商务网站上最重要的“添加到购物篮”按钮。

根据元素对用户的重要性对元素进行优先级排序，因此如果您可以在桌面上的图像旁边放置文本，请仔细考虑在移动设备上哪个最能吸引用户的注意力，并确保将其放在首位。 其他元素，例如预览页面上的随附博客图像，可以完全从移动版本中删除，而将重点放在内容本身上。

3. 试验可扩展导航

导航是响应式网页设计中最具挑战性的方面之一，但它也是最重要的方面之一。 与大多数网页设计规则相反，这是你不需要保持一致的地方——在大屏幕上使用的大型复杂菜单根本无法在手机上运行，​​因此为不同的屏幕创建不同类型的导航是完全可以接受的尺寸。 隐藏导航在许多移动网站上都很流行，一个简单的图标（例如汉堡）表示菜单的存在。 您可以将菜单向下滑动到下面的内容上，也可以将其覆盖在整个屏幕上。 另一种选择是为水平滑动而丰满，其中内容显然会从屏幕的一侧消失，用户可以滑动来参与它。

无论您选择哪种，都不要完全否定一致性——您的菜单在视觉特征方面应该与其他版本有相似的感觉，即使它具有不同的功能。

4.关于图像

网站上的图像质量至关重要，因为它们构成了访问者对网站的第一印象的很大一部分。 但是大图像对带宽能力较低的移动设备的下载速度有负面影响。 与内容非常相似，您应该质疑每个屏幕尺寸的每个图像的包含，并且只包含绝对必要的那些，同时重新考虑包含多个大图像的滑块等元素。

优化您的剩余图像，通过自适应大小使其灵活，并使用适当的格式存储它们。 请记住，您不太可能需要手机上的“放大图像”功能，因为无论如何图像都可能是全屏的。 如果您需要包含图片库，请选择长滚动导航，或使用水平滑动在它们之间移动。

5. 考虑排版

您选择的排版需要仔细考虑，因为在中型或大屏幕上工作的许多字体在缩小到较小的屏幕尺寸时变得难以正确阅读，因此请始终在不同的屏幕上进行彻底测试。 仔细平衡你的标题——它们的功能需要很明显，尽管如果它们太大，它们可能显得过于占主导地位——并确保背景颜色和字体之间有足够的对比度。

当您向上移动不同的屏幕尺寸时，请注意内容的行长——如果一行太长，则可能难以阅读。 将行长保持在大约 60-75 个字符，并在更宽的屏幕上使用侧边栏或图像填充空间。

6.针对触摸屏进行优化

响应式网页设计不仅需要考虑不同的屏幕尺寸； 它还必须针对不同的输入法进行优化。 触摸屏可能很棘手，因此最好在按钮大小和链接方面大方，以大约 44 平方平方英寸的可点击区域为目标。 您还需要优化触摸屏的用户体验。 是的，它们本质上是直观的，但微妙的导航助手，如滑动手势，是一个有价值的补充。

7.在实际设备上测试

最后，虽然规划设计是至关重要的一步，但不要只依赖理论。 有一些移动模拟器可以帮助检查你的设计和 CSS 断点，但没有什么比在真实事物上进行测试更好的了——其中许多模拟器只复制各种屏幕尺寸，而不是不同操作系统的功能。 确保您有各种不同尺寸的屏幕可供玩，并有许多不同的用户，并彻底测试您的设计。 这通常会带来新的观点，并确认您走在正确的轨道上或向您展示可以改进的地方。

响应式网页设计在不断发展和发展，我们在这里只触及了皮毛。 该领域的最佳实践也经常变化，因此跟上最新发展的速度是值得的。 请记住，许多用户的设备带宽较弱、分辨率较低且处理能力较小，因此您的网站应该简单、组织良好、干净、易于使用，并且在各种不同的屏幕上看起来都不错。