内容在不重叠的情况下的移动

sintHiaseo9

例如，对于智能手机等较小的屏幕，可用空间非常垂直，内容开始按列向下滚动，如下面的 GIF 所示。

流动与静态

相对单位
正如我们在第一点中提到的，我们要处理各种尺寸的屏幕，因此我们需要指定的测量值（例如以像素为单位），以便能够无问题地变化。

这就是所谓的相对单位，以百分比表示。

相对单位

为了更容易理解，您可以指定设计元素始终占用 50％ 的可用空间。因此无论屏幕尺寸是多少，该元素总是占据屏幕的 50%。

断点
响应式网页设计的关键之一是使内容适应您想要的屏幕尺寸。

断点

这些就是所谓的断点，例如，如果屏幕是智能手机，它们允许您从在桌面上显示 3 列的内容转换为仅显示 1 列的内容。

最大值和最小值
您可能会认为，通过响应式设计，图形元素可以无限放大以填满整个屏幕的宽度。

事实并非如此。

您可以指定元素始终占据屏幕的 100％，但也可以设置一个安全的最大值，以使其永远不会超过该最大值。

最大最小值

比如你为某个元素定义最大宽度为1200px，而屏幕为1400px，那么虽然它本来就应该占据屏幕的100%（1400px），但为了避免其变形，还是会遵循不超过1200px的顺序。

嵌套对象
正如你所见，得益于响应式设计，所有元素都会根据屏幕大小进行修改和“舞动”。

然而，当网站包含许多不同元素时，这也可能是一个问题。

因此，可以选择创建嵌套元素，使它们表现得像一个元素，就像它们在容器内一样。

嵌套对象

移动设备和桌面设备，哪个设计更胜一筹？
一个非常常见的问题是，是否 香港电邮数据 首先设计移动版本，然后使其适应桌面版本，或反之亦然。

从技术层面上看，并没有太大的区别，尽管通常建议从移动版本开始。

移动桌面优先

考虑一下，在具有大量元素和功能的桌面版本上，您必须将其缩小到移动屏幕，这有时可能是一项艰巨的任务。

开始设计移动版本会产生一系列额外的限制，但一旦克服，它们就不会对桌面版本造成重大问题。