一个乐于分享的博客
关注互联网折腾服务器分享码农的日常

WordPress主题DUX手机版显示小工具侧边栏

WordPress主题DUX手机版显示小工具侧边栏

之前分享过,岩兔站用的主题是DUX的主题,界面干干净净,也比较大气,扩展功能也十分丰富。

但用的久了,仍然能发现一些问题,其中比较让人不爽的就是手机端不能显示侧边栏的小工具。有时候站长朋友们会在小工具中放一些重要内容。如今用手机访问网站是大势所趋,而手机端显示不出来的话就什么都白搭了。所以岩兔站研究了一下怎么让DUX主题手机版也能显示出侧边栏。

修改版面

首先分析一下页面布局,在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开发者工具中可见样式的几处修改

WordPress主题DUX手机版显示小工具侧边栏

 

 

转载务必注明出处:岩兔站 » WordPress主题DUX手机版显示小工具侧边栏
赞 (4) or 打赏

讨论区 2

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    学习了。有时间尝试一下。一直想改没时间弄

    一艘大轮船6个月前 (06-25)回复