無作為
不僅僅是一種態度!

WordPress主題DUX手機版如何顯示小工具側邊欄

WordPress網站用dux主題的朋友很多,因為dux主題確實不錯,但是許多用戶現在都是使用手機上網了,所以dux的邊欄小工具在手機端是完全不顯示的。

那么如何使dux邊欄小工具在手機屏幕顯示呢?

使用dux主題的站長都知道,dux在手機顯示上是不顯示邊欄的,它并不是根據ua識別顯示信息。

而是根據屏幕分辨率來識別是否顯示邊欄小工具的。

修改方法

首先分析一下頁面布局,在CSS中找到了如下代碼。

@media (max-width: 1024px)
.sidebar {
 display: none;
}

可見樣式表中用到了媒體查詢,當頁面寬度小于1024px時,即隱藏側邊欄。

取消自動隱藏

注釋display:none;并修改代碼為:

@media (max-width: 1024px)
.sidebar {
  /*display: none;*/
}

再查看頁面,側邊欄雖然能顯示,但是寬度仍然是固定寬度360px。

相關樣式表為:

.sidebar {
  float: left;
  margin-left: -360px;
  width: 360px;
  position: relative;
}

設置寬度自適應

繼續為不影響電腦版界面,將代碼寫到寬度小于1024的媒體查詢中。

增加兩行樣式,分別是寬度100%和清除margin,最終樣式如下:

@media (max-width: 1024px)
.sidebar {
  /* display: none; */
  width: 100%;
  margin: 0;
}

實現效果

只是簡單的修改了幾行樣式表,即可實現手機版顯示側邊欄的效果,相當簡單實用。

修改完成手,頁面寬度大于1024px時,顯示正常的電腦視圖,小于1024時,側邊欄自動填充至正文下方。寬度可自動填充瀏覽器寬度。

Chrome開發者工具中可見樣式的幾處修改。

歷史上的今天:
贊(42) 打賞
所有免費資源、福利、電影、破解軟件未經允許不得轉載:www.btilnp.live無作為 » WordPress主題DUX手機版如何顯示小工具側邊欄

留下評論 搶沙發

無作為-不僅僅是一種態度

登錄/注冊廣告合作

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

微信掃一掃打賞

广西风采快三