此前有網友反饋，主機排行網在移動端表現太醜了，希望我改改，今天週末，我專門花了兩個多小時來好好把移動短整治了一下，比以前好看多了。
對比一下吧，下圖是前版本的主機排行網：
新版效果：
我此前也從沒真正做過移動端適配的事情，只是初步了解是通過**查詢來做的，即當瀏覽器介面滿足一定大小時，就會觸發該**查詢器所包含的css。
主機排行網用的css框架是bootstrap4，而bs在自適應方面是沉澱了十多年的，很強悍。我參照官網教程：重新改版了排行頁中的兩列布局，此前的**是：
// part 1
// part 2
.col-在螢幕是任何大小時都生效，如果我們想讓介面縮小到一定時，兩列變一列，那麼就不能用.col-來修飾了，我根據我的需求，在介面大於960px才觸發兩列布局，所有這裡要把.col-改為.col-lg-。
這個改動完了，我希望當介面縮小到1000px以下時，主機特徵那部分隱藏掉，並且在介面小於720px時隱藏掉詳細評價按鈕，不然內容太擠，放不小。
}}此前一直不想做移動端的適配，是因為覺得很難，其實有了bs的幫助這個功能真的很好做，凡是多嘗試多探索，不要不做就放棄了。
移動端自適應
1 js動態設定html的字型大小 var clientwidth 0 if document.documentelement.clientwidth 600 else document.documentelement.style.fontsize 50 clientwidth 375 px win...
移動端自適應
width device width width為設定layout viewport 的寬度，為乙個正整數，width device 表示寬度是裝置螢幕的寬度 initial scale 1.0 initial scale為設定頁面的初始縮放值，可以是乙個帶小數的數字，1.0就是佔網頁的100 mi...
移動端PC端自適應
查詢 這段 的幾個引數解釋 width device width 寬度等於當前裝置的寬度 initial scale 初始的縮放比例 預設設定為1.0 minimum scale 允許使用者縮放到的最小比例 預設設定為1.0 maximum scale 允許使用者縮放到的最大比例 預設設定為1.0 ...