响应式网站设计：如何使您的网站具有响应性

设置您的媒体查询范围（响应断点）

根据您设计的独特需求设置您的媒体查询范围。例如，如果我们想在设计中遵循Bootstrap标准，我们将使用以下媒体查询：

• 纵向手机为576px
• 768px平板电脑
• 992px 用于笔记本电脑
• 大型设备为1200像素

使用百分比调整布局元素或创建CSS网格布局

第一步也是最重要的一步是根据媒体查询或屏幕断点为不同的布局元素设置不同的大小。

您拥有的布局容器的数量将取决于设计，但大多数网站都关注下面列出的元素：

• 包装器或容器
• 标题
• 内容
• 侧边栏
• 页脚

通用布局

使用移动优先的方法，您可以像这样设置主要布局元素的样式（无需对手机的基本样式进行媒体查询）：

在基于百分比的方法中，“float”属性控制元素将出现在屏幕的哪一侧、左侧或右侧。

如果您想超越基础并创建尖端的响应式设计，您需要熟悉CSS flexbox布局及其属性，如box-sizing和flex。

实施响应式图像

如前所述，确保图像不会损坏的一种方法是仅对所有图片使用动态值。

但这不会减少移动访问者访问您网站时的负载。

当您将图像添加到页面时，请确保srcset始终包含具有不同尺寸照片的内容。

手动执行此操作可能非常耗时，但使用WordPress等CMS时，它会在您上传媒体文件时自动发生。

网站文本的响应式排版

响应式网页设计的主要焦点是布局块、元素和媒体的响应性。文本通常被视为事后的想法。

但是对于真正的响应式设计，您还应该适当地调整字体大小以匹配屏幕大小。

最简单的方法是为font-size设置一个静态值，比如22px，并在每个媒体查询中调整它。

字体大小与视图大小散点

您可以同时定位多个文本元素，方法是使用逗号分隔每个元素。

测试响应能力

首先，您想通过Google的移动设备友好测试来测试您的网站是否适合移动设备。只需输入您网站的URL，然后单击“Test URL”按钮即可获得结果。

谷歌的移动友好测试

如果获取您的网站需要一段时间，请不要担心。这并不能反映您的页面加载速度。

如果您按照本文中概述的步骤操作，则应该说您拥有一个适合移动设备的网站。

然后，您想使用Chrome开发人员工具等工具在多种屏幕尺寸上测试您的网站。

在Windows计算机上按 CTRL + Shift + I 或在 Mac 上按 Command + Option + I 打开相关设备视图。从这里，您可以选择您选择的移动设备或平板电脑来测试您的设计的响应能力。

在Chrome中测试响应式和移动布局

在完成此过程时，您需要回答几个问题。

• 布局是否调整到正确的列数？
• 内容是否适合不同屏幕上的布局元素和容器？
• 字体大小适合每个屏幕吗？