响应式网页大揭秘( 四 )

2022-05-05 响应式网页

文章插图

同样的内容，我们在电脑端设置完成后。可以更加容易地进行适配。整体不会随着网格系统的变化发生太大的改变，因为12栏到8栏也是按照比例进行的改变。

文章插图

前面整个的响应式网页的设置和适配大家应该都已经熟悉了，在设置网格系统的这个步骤时，栏数不固定的类型，现在越来越得到设计师的认可。

就像我前面课程中讲过的，网页设计是一个模块化的组织，我们就像拼搭积木一样进行设计，网页尺寸发生变化，可以就适当的减少积木的数量进行适配。接下来，通过一个案例让大家明白具体的适配思路都有哪些。

文章插图

在做网页的过程中，很多人会有疑惑，设计网页是先设计电脑端还是手机端，在这里我建议大家先设计电脑端，因为手机端只是一个简化的过程，相对来说更加的容易。反之，则会加大工作难度。

文章插图

文章插图

首先设置网页的版面网格也就是可视范围，这里设置了1700px 。可视范围越大图片的展示效果越好。

文章插图

创建12栏，栏间距20像素的网格系统，这里采用的是间距保持不变的形式。

文章插图

这里主要讲解的是响应式网页的适配方式，版式这里我们就快速略过。置入图片，提前做好的导航栏文字组。

文章插图

文章插图

首先设置可视范围，这里设置了900像素。然后设置网格系统，还是同样的12栏，栏间距20像素。

文章插图

最后按照屏幕大小去调整置入版面中。

文章插图

文章插图

由于平板的尺寸和显示器接近，这里只是微调就可以了。

文章插图

文章插图

手机端的版面就需要进行重新的设置了，第一步还是先要设定版面网格。使用的同样还是20栏，栏间距20像素的网格系统。

文章插图

置入画面，重新设计文字组的形式。这样手机端就适配完成了。

文章插图

继续适配一下主栏的内容，这里电脑端的内容相对来说，排版比较松散。而手机端也应该相应的保持，这种松散的感觉，但是要尽量的放大图片，进行展示。

文章插图

商品展示这里使用的三栏展示的重复单元型展示商品。手机端则可以适当的简化，放置两个商品进行展示。

文章插图

电脑端部分使用的是左右组合的单元型形式，手机端就要尽量的去简化。

视频可以直接展示放在手机中，下方的关于我们变成一个通栏的形式，放置于黑色背景上，保持和网页中的一致。

文章插图

网页端的联系我们这一部分，高度是屏幕的高度，手机中不需要这么严格的设置，只需要按照通栏的形式进行编排。保持手机端上下部分的统一性，以及和电脑端的关联性。

推荐阅读

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

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