想象一下您为桌面浏览器创建了一个很酷的设计。一旦智能手机视图打开，所有块就会移动并相互排列。
这就是流程——这就是响应式设计的关键原则之一。记住这一点。
测量单位的相对性
我们从高中物理课程中知道，速度可以是绝对的（无论从哪个观察运动的点看，速度都是相同的），也可以是相对的（速度可以根据参考点而变化）。
测量单位也是同样的情况。例如，不同设 洪都拉斯电话数据 备的像素密度会有所不同。因此，320 像素的尺寸在显示器和手机上看起来会有所不同。
因此，为了方便起见，您应该使用相对测量单位：块的所有尺寸、比例和坐标都应相对于计算机屏幕和智能手机显示屏上的元素进行设置。例如，在上限。
使用检查点
这些元素仅在具有指定屏幕参数的特定设备上查看时位置才会改变。
如果页面图像“爬”出屏幕边界，建议使用这样的点并固定内容。
最小值和最大值
也可能是这样的：在智能手机上，文章显示正确，但当你在桌面上打开同一页面时，所有内容都被拉伸且难以阅读。太令人失望了。
为了避免不必要的麻烦，您可以指定属性。比如说屏幕宽度如果达不到1000像素，那么内容就要显示在整个屏幕上。否则，最大宽度将是 1000 像素。
对象嵌套
需要使用依赖于其他块的位置的多个元素。在这种情况下控制很难实施。您可以将这些对象放在一个容器中。此选项适用于您不打算适应屏幕参数的块（按钮、徽标等）。
正确的字体
网络字体是一件美丽的东西！只要记住它们都正在加载即可。这会影响用户的页面加载速度。
正确使用光栅和矢量图形
图像是否包含很多小细节？使用光栅格式。在其他情况下，优先考虑矢量。
但无论如何，所有图像都必须进行优化——必须进行压缩。通常来说，向量已经具有压缩功能。然而，并非所有旧浏览器都支持它们。
保持布局尺寸
有一些普遍接受的基本尺寸标准，在制定布局时可以作为指导。
响应式设计使用称为断点的概念。这些是显示设计在什么分辨率下发生变化的参数，它们通过媒体功能进行传输。
典型参数：
320像素、480像素 – 适用于移动设备；
768像素 – 适用于平板电脑；
1024像素 – 适用于上网本和部分平板电脑；
1280像素及以上 – 适用于 PC。
没有严格约束特定的分辨率。这取决于设备参数和设置。
有时，当布局在 768 像素至 320 像素范围内正确显示时，没有必要为中间分辨率（例如 480 像素）创建布局。