2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

此前有網(wǎng)友反饋，主機(jī)排行網(wǎng)在移動端表現(xiàn)太丑了，希望我改改，今天周末，我專門花了兩個多小時來好好把移動短整治了一下，比以前好看多了。

對比改變

對比一下吧，下圖是前版本的主機(jī)排行網(wǎng)：

新版效果：

體驗(yàn)地址：https://hostingranking.cn/

本次修改的過程

我此前也從沒真正做過移動端適配的事情，只是初步了解是通過媒體查詢來做的，即當(dāng)瀏覽器界面滿足一定大小時，就會觸發(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>

這樣的兩列布局代碼會讓我的界面始終是兩列的，因?yàn)檫@里沒有其他的col修飾，.col-在屏幕是任何大小時都生效，如果我們想讓界面縮小到一定時，兩列變一列，那么就不能用.col-來修飾了，我根據(jù)我的需求，在界面大于960px才觸發(fā)兩列布局，所有這里要把.col-改為.col-lg-。

這個改動完了，我希望當(dāng)界面縮小到1000px以下時，主機(jī)特征那部分隱藏掉，并且在界面小于720px時隱藏掉詳細(xì)評價按鈕，不然內(nèi)容太擠，放不小。

此時bs就沒有相關(guān)的類來幫助你了，需要自己動手寫媒體查詢：

@media(max-width: 1000px) {.features {display: none;} } @media(max-width: 720px) {.btns {:nth-child(2) {display: none;}} }

總結(jié)收獲

此前一直不想做移動端的適配，是因?yàn)橛X得很難，其實(shí)有了bs的幫助這個功能真的很好做，凡是多嘗試多探索，不要不做就放棄了。

轉(zhuǎn)載于:https://my.oschina.net/u/1402873/blog/3030446

總結(jié)

以上是生活随笔為你收集整理的主机排行网重大更新，移动端自适应的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。