思否網站隨屏幕大小自動發生變化

上次彙報中，潘老師演示了一下思否網站設計的優勢，其中一點就是頁面隨屏幕自動發生變化，先看幾張圖，來了解一下這神奇的功能

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

總結

從這個細節就能夠看出，一個強大的網站老是能考慮到用戶的體驗，儘可能作到用戶友好