无作为
不仅仅是一种态度!

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开发者工具中可见样式的几处修改。

历史上的今天:

赞(7) 打赏
所有免费资源、福利、电影、破解软件未经允许不得转载:www.wuzuowei.net无作为资源 » WordPress主题DUX手机版如何显示小工具侧边栏

来句评论吧! 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

无作为-不仅仅是一种态度

登录/注册广告合作

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏