模拟简单回帖界面

媒体响应

开发工具与关键技术：DW 媒体响应
作者：周欢
撰写时间：2019/2/10

在我们设计的网页很多时候会使用到插件，在本期所讲的媒体响应也同样是使用插件所实现的。其实插件对于设计网页是很方便的，我们只需要调用就行，减少了工作量，不在需要我们去写入很多的代码。
今天所讲的媒体响应，它的方式有多种，有媒体响应的简单使用（没有任何的修饰和改变），有媒体响应的嵌套使用（嵌套使用可形成贴吧里的回复，可添加一些样式，提高美观性）。
下面我们来看一下媒体响应的简单使用

代码分析：
.media img { width: 120px; height: 120px; border-radius: 50%;}
给media底下的的img设置一样的宽和高，再给其添加50%的圆角效果，一个正方形的50%的刚好是一个圆，也就可以相当于是个人头像。

接下来看看媒体响应的嵌套使用：


中间英文所示的为嵌套进来的媒体响应，其实上诉源代码是由一个媒体响应嵌套和基本的媒体响应组合而成的。效果如下：

其实可以稍作改动能形成一个聊天界面，相当于一个人发出观点，宁一个人对这一观点提出自己的看法，然后可以进行多方的提答。也差不多是模拟了贴吧里的回帖。

总结：
很多东西是可以多方改动的，可以再原基础的东西上面进行稍加改动从而也会形成宁一种新奇的东西，也就相当于我们的创新。
大多东西都是可以改动的，所以基础我们必须打结实，才能有好的突破。

提前准备的插件：bootstrap4离线版或者bootstrap4中文文档

这是离线版的bootstrap4，点击上方的中文手册就可以出现翻译过的文档