#042:让顶部的 Treehouse 广告响应式

我们现有的广告在大型/桌面尺寸屏幕上表现很好,但在较小的屏幕上很快就开始失效。

在这个设计中,我们已经使用了一些断点,但是这个设计开始失效的位置与现有断点不匹配。没有问题,我们可以很容易地为此做一个断点。

当可用空间变小时,我们对广告中可以隐藏的内容做了一些选择。我们首先移除树形图形,只留下一些文字。我们甚至在文字中使用了一些 span 标签来重复使用我们已经有的句子中的单词(隐藏一些单词,保留其他单词)。在最小尺寸下,我们只保留树形图形。

这个特定的设计很可能会发生改变,然后会一次又一次地发生改变。这就是广告的本质:让为广告付费的人满意,同时保持你的设计完整性。