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