前言

这篇来写点前端。前一段时间一直在学前端三件套，也了解了一些关于响应式网页设计的知识。终于了解到为什么有的网站可以很好的适应不同的设备，有的网页在手机上的展示让人头大。这其实就是有些网站很好的做了响应式网页设计，有的没有。

关于响应式网页设计

先来看看MDN Docs关于响应式网页设计的一些定义。

随着人们使用的屏幕尺寸的种类越来越多，出现了响应式网页设计的概念（responsive web design，RWD），RWD 指的是允许 Web 页面适应不同屏幕宽度因素等，进行布局和外观的调整的一系列实践。
来源：developer.mozilla.org/zh-CN/docs/…

实践

我从frontend mentor上找到了一个比较简单的project，是做一个展示用户评论的小界面。
链接在这里：www.frontendmentor.io/challenges/…
要求做出下面的效果:
桌面端：

移动端：

我用的是css grid，和css flexbox。
移动端的界面看起来是比较简单的，所以我先写了移动端的布局。移动端的布局我主要是用的就是flexbox。大致看起来就是把五个盒子竖着叠在一起，然后几乎伸展到整个屏幕。盒子与盒子之间也有一定的间隔。 下面的这段代码就大概实现了这个布局。testimonial是这五个盒子的class name。

解决了移动端的布局，再来看桌面端的布局。桌面端的布局相对于移动端来说就复杂了很多。五个部分面积不一，都有着不同的布局方式，整体布局也不像移动端是竖着摆放的。所以我使用了css grid来写。css grid是二维的，同时有横轴和竖轴，可以非常方便的调整每个盒子在大的容器中所摆放的位置。

想要在一个特定的屏幕大小时由移动端界面调整至桌面端的展示，我们需要使用@media 并且条件为min-width: 576px。
我们可以把大的container分为有2行4列的grid，

这样划分主要的容器之后，容器大概就变成了这个分布。我们就可以利用每个grid的边线来定位每个模块需要放置的位置。

下面的代码就定位了Daniel和Jonanthan这两个人的评论板块的位置：

Daniel的板块始于列1止于列3，Jonanthan的代码始于列3止于列4。他们两个都位于上层，所以都是始于行1止于行2。类似的，我们可以写出其他人的布局。

最后，我们可以看到每个人的评论板块之间都有一些间隙，我们可以定义column-gap 和row-gap来达到这个效果。