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