此前有網(wǎng)友反饋翠勉，主機(jī)排行網(wǎng)在移動(dòng)端表現(xiàn)太丑了妖啥，希望我改改霉颠，今天周末对碌，我專門花了兩個(gè)多小時(shí)來好好把移動(dòng)短整治了一下，比以前好看多了蒿偎。
對比改變
對比一下吧朽们，下圖是前版本的主機(jī)排行網(wǎng)：
新版效果：
體驗(yàn)地址：https://hostingranking.cn/
本次修改的過程
我此前也從沒真正做過移動(dòng)端適配的事情，只是初步了解是通過媒體查詢來做的诉位，即當(dāng)瀏覽器界面滿足一定大小時(shí)骑脱，就會(huì)觸發(fā)該媒體查詢器所包含的css。
主機(jī)排行網(wǎng)用的css框架是bootstrap4苍糠，而bs在自適應(yīng)方面是沉淀了十多年的叁丧，很強(qiáng)悍。我參照官網(wǎng)教程：https://getbootstrap.com/岳瞭，重新改版了排行頁中的兩列布局拥娄，此前的代碼是：
<div class="row">
<div class="col-10">
// part 1
</div>
<div class="col-2">
// part 2
</div>
</div>
這樣的兩列布局代碼會(huì)讓我的界面始終是兩列的，因?yàn)檫@里沒有其他的col修飾瞳筏，.col-在屏幕是任何大小時(shí)都生效稚瘾，如果我們想讓界面縮小到一定時(shí)，兩列變一列姚炕，那么就不能用.col-來修飾了摊欠，我根據(jù)我的需求，在界面大于960px才觸發(fā)兩列布局柱宦，所有這里要把.col-改為.col-lg-些椒。
這個(gè)改動(dòng)完了，我希望當(dāng)界面縮小到1000px以下時(shí)掸刊，主機(jī)特征那部分隱藏掉摊沉，并且在界面小于720px時(shí)隱藏掉詳細(xì)評價(jià)按鈕，不然內(nèi)容太擠痒给，放不小说墨。
此時(shí)bs就沒有相關(guān)的類來幫助你了，需要自己動(dòng)手寫媒體查詢：
@media(max-width: 1000px) {
.features {
display: none;
}
}
@media(max-width: 720px) {
.btns {
:nth-child(2) {
display: none;
}
}
}
總結(jié)收獲
此前一直不想做移動(dòng)端的適配苍柏，是因?yàn)橛X得很難尼斧，其實(shí)有了bs的幫助這個(gè)功能真的很好做，凡是多嘗試多探索试吁，不要不做就放棄了棺棵。
