Discuz! X3.4默认模板自适应手机与pc的方法

以下是详细讲解“Discuz! X3.4默认模板自适应手机与PC的方法”的完整攻略：

准备工作

首先，你需要确保你的Discuz! X3.4版本已经安装好，并且是默认模板。

在进行修改之前，最好先备份一下原模板，以防修改错误导致网站无法正常访问。

修改方法

1. 打开模板目录

你需要进入Discuz! X3.4的模板目录，在default目录下找到mobile和pc两个子目录。

1. 修改CSS样式

在这两个子目录里面，你需要找到common.css文件，在里面加入以下代码：

/* 手机端和PC端通用样式 */
@media screen and (max-width: 767px) {
  /* 手机端样式 */
}
@media screen and (min-width: 768px) {
  /* PC端样式 */
}

这段代码使用了CSS3的媒体查询功能，根据屏幕宽度来动态改变样式。

在上面的代码中，max-width: 767px表示屏幕宽度小于等于767px，为手机端，可在@media内编写手机端样式；min-width: 768px表示屏幕宽度大于767px，为PC端，可在@ media内编写PC端样式。

下面是示例，假设我们要为手机端的页面中的标题设置字体大小为16px，为PC端的页面中的标题设置字体大小为24px，可以写入以下代码：

/* 手机端样式 */
h1 {
    font-size: 16px;
}
/* PC端样式 */
@media screen and (min-width: 768px) {
    h1 {
        font-size: 24px;
    }
}

此外，你还可以使用其他CSS样式控制网页的显示效果。

1. 修改HTML结构

在mobile和pc子目录下分别修改各自的模板文件，比如：header.htm、footer.htm、nav.htm等。

在修改时，建议将通用HTML标签如header、footer、nav等写成通用模板，例如：

<!-- 通用头部公共部分 -->
<header>
    <div class="logo"></div>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </nav>
</header>

1. 单独设置样式

如有存在于mobile和pc之间样式差异很大的标签，可以单独处理，例如：

<!--只修改手机端样式-->
<a href="#" class="button button_red">点击</a>

<!--只修改PC端样式-->
<a href="#" class="button button_blue">点击</a>

1. 测试

修改完成后，可以使用开发者工具进行模拟测试，确认修改效果是否符合预期。

示例

示例1：在网站正文上方添加一个广告

我们先在common.css文件中添加以下样式代码：

/* 手机端和PC端通用样式 */
@media screen and (max-width: 767px) {
  /* 手机端样式 */
  section {
    padding-top: 80px;
  }
}
@media screen and (min-width: 768px) {
  /* PC端样式 */
  section {
    padding-top: 120px;
  }
}

以上代码为网页正文（即section标签）添加了上边距，分别设为80px和120px。

接着，我们打开网站的模板首页，查找到网站正文对应的HTML结构。

我们在网站正文上方添加了一个广告，例如下面的代码：

<!-- 广告 -->
<div class="ad">
    <img src="images/ad.jpg" alt="">
</div>

<!-- 网站正文 -->
<section>
    <h1>网站正文</h1>
    <p>这里是网站正文内容……</p>
</section>

此时网站的广告已经可以在网站正文上方正常显示，并且在手机和PC两个端口都可以自动适应。

示例2：主页背景图像

在移动端和桌面端上，为我们网站的主页添加一个全屏背景图像，可以使用以下示例代码：

html,body{
    height: 100%; /* 设置html、body元素的高度为100% */
}

@media (min-width: 768px){
    /* PC端使用大尺寸背景图片 */
    html,body{
        background-image: url(images/bg-1440.jpg);/* 宽度1440px的背景图片 */
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: center center;
    }
}

@media (max-width: 767px){
    /* 移动端使用小尺寸背景图片 */
    html,body{
        background-image: url(images/bg-360.jpg);/* 宽度360px的背景图片 */
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: center center;
    }
}

以上代码实现了移动端和桌面端背景图像自适应，其中，@media媒体查询用于检测设备是否满足某些条件，比如屏幕尺寸。

正如上述代码所示，在PC端上，背景图片背景尺寸为1440px，而在移动端上，尺寸为360px。背景图像在水平和垂直方向上都居中，不会随着浏览器大小变化而失去比例。

当背景图像添加完成后，网站将自动适应移动端和桌面端。