响应式网页大揭秘( 二 )

2022-05-05 响应式网页

这份指导手册，涵盖整个显示器端的内容，从最开始的网格搭建，到大的设计原则。大家感兴趣可以去这个网站看一下。

文章插图

今天我们主要来看的是，这里面给我们提供的关于中断点的信息。黄色标记的位置就是中断点的信息。

文章插图

这份表格里面规定的数值很多，在适配的时候不需要全部都做，我们只需要挑选几个常见的就可以了。

文章插图

在上面的动图演示中，使用就是这个规范里面的数值，这样，设计出来的响应式网页会更加的具有规范性。

文章插图

这个网页我们在浏览的时候，可能会发现它只有两个中断点，其他的时候基本保持不变。

这是因为，平板端基本可以直接沿用电脑端的相关尺寸，而手机端必须要重新的适配。

文章插图

现在大家应该对响应式网页有一定的了解了。它的高适应可以让你的网页，更好地适应不同的设备，并且提高网页的实用性。

中断点越多会让你的网页变得更加的细腻，而当我们没有那么多的时间和精力去做的时候，可以像上面的网页一样，只适配两个尺寸。

这样可以确保大部分的用户都可以接受到网页的信息。接下来，我们来看一下，响应式网页的类型都有哪些。

文章插图

响应式网页的类型分为两种，固定网格和流动网格，这里的网格并不是我们熟知的网格系统的建立，而是在收缩网页的时候，网格的变化模式。

先来看一下固定网格，这里是在收缩网页的过程中，网格基本固定保持不变，当收缩接近中断点时，页面才会发生变化。

文章插图

我们先来看一下线框图，红色的线段是中断点的标记。

文章插图

当我们的页面收缩到一个中断点的位置，最边缘的元素就会自动被减掉，用来适配尺寸。

文章插图

到达下一个中断点的时候也是同样的方式。

文章插图

固定网格的最大的特征是整个网页，在收缩的过程，到了中断点就会自动地减少元素，其他元素基本保持不变。

文章插图

而流动网格的形式，则是相反的，元素会随着尺寸的变化而变化。

文章插图

这个网页，在收缩的过程，到了中断点就会自动地减少元素，其他元素基本也会随着尺寸进行相应的变化。

文章插图

继续来收缩这个网页，当网页收缩接近中断点的时候，整个网页中的每一个元素，比例都随之变化。当到中断点的时候，边缘的元素被减掉。

文章插图

以此类推到下一个中断点的时候，各个元素还是按照比例进行缩放，直到接近下一个中断点。但并不是每一个中断点都需要去减少元素，可以适当地按照元素的比例进行调整。

文章插图

到达下一个中断点，元素继续减少，用以适配尺寸。最后到达最小的尺寸为止。

文章插图

这里除了这样的继续两列展示，还有另外一种形式。直接变成一个单专栏型的网页展示，这样可以最大的展示图像的效果。

推荐阅读

上一篇：红茶有什么冲泡,红茶是否可以加蜂蜜

下一篇：红茶如何制作口感温和,昭平红茶冲泡器具