上次汇报中，潘老师演示了一下思否网站设计的优点，其中一点就是页面随屏幕自动发生变化，先看几张图，来了解一下这神奇的功能

首先，这是正常宽屏（1920*1080）下的效果

放大到165%的效果，会发现搜索框变窄了，而创建按钮从文字变成了一个图标

放大到195%的效果，会发现左右两侧的竖栏消失了，导航栏的通知和私信图标和右边的一些链接也不见了，而导航栏下则多了一行导航

随即老师抛出一个问题，怎么实现的？
作为一个新人小白，对于css的使用只有入门级别，我大概知道bootstrap上的栅格可以在不同大小的屏幕自动按列排布，但随屏幕大小图标变换和消失就不甚知晓了。

之后，为了弄明白到底为什么，我直接扒来了网页的源代码，首先，先搞明白创建按钮变+号是怎么回事。
先找“创建按钮”，在创建按钮下面i标签就是放大后的+号

接着删除除创建按钮和i标签以外的其他所有无关代码



此时，按钮在放大后依然拥有变化的功能
接着下来的过程很无脑，就是挨个删除他们的class属性，检索使得按钮能变化的功能，最后，我锁定到了这个属性visible（可见的）。

去网上一查，找到了答案
这个visible是bootstrap里的自动隐藏和显示，唉，看文档时没仔细看，学艺不精啊，具体用法如下：

简单来说就是根据屏幕大小自动显示或隐藏，然后我再回首页的源代码搜索visible，基本变化的地方都用到了该属性

另外，在div的class中设置多个栅格，可以在对应大小的屏幕上对应显示

<div class="col-sm-4 col-md-3 col-lg-3 text-right">

总结

从这个细节就可以看出，一个强大的网站总是能考虑到用户的体验，尽量做到用户友好