思否网站随屏幕大小自动发生变化

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

首先，这是正常宽屏（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">

总结

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