手机模板制作需启用触屏版风格并修改touch目录下对应文件，使用Discuz模板语法调用数据；自适应可通过响应式CSS实现，添加viewport、媒体查询和弹性布局，推荐独立手机模板或响应式PC模板方案。
Discuz手机模板制作和自适应实现，核心在于理解其模板机制与响应式布局技术的结合。重点不是从零写代码，而是基于现有结构进行适配和优化。
手机模板如何制作？
Discuz默认支持多端模板切换，制作手机模板首先要启用并配置移动端模板方案。
1. 启用手机模板功能进入后台“界面” → “风格管理”，选择一个支持移动端的风格（如“Discuz! X默认风格 触屏版”），或创建一个新的手机风格。
系统会识别移动设备并自动加载对应模板文件。手机模板的文件通常存放在模板目录下的 touch 文件夹中，例如：
/template/default/touch/
手机端主要使用以下关键模板文件：
- forum/forumdisplay.htm - 版块列表页
- forum/viewthread.htm - 帖子内容页
- common/header.htm - 头部
- common/footer.htm - 底部
Discuz模板使用特定标签调用数据，例如：
- {lang forum_thread} - 调用语言包
- - 循环输出帖子列表
- {$_G['setting']['sitename']} - 输出站点名称
自适应怎么实现？
自适应不是必须做两个独立模板，也可以通过CSS媒体查询让同一套HTML适配不同设备。
1. 使用响应式设计
如果不想单独开发 touch 模板，可在PC模板中加入响应式CSS。
- 设置视口：
- 使用百分比宽度、弹性布局（flex）代替固定像素
- 通过媒体查询调整样式：
@media (max-width: 768px) {
.layout { display: block; }
.side { display: none; }
.post-content { font-size: 16px; }
}
2. 判断设备类型（可选）在全局模板中可用JS或CSS media判断设备，动态加载资源或调整行为。 例如用JavaScript检测屏幕宽度，隐藏侧边栏。 3. 图片和字体适配
- 图片设置 max-width: 100% 防止溢出
- 使用相对单位（rem、em）控制字体大小
- 避免使用Flash或过宽表格
推荐做法
如果你希望体验更好，建议采用独立手机模板（touch方案），因为Discuz对移动端已有成熟支持。若追求简洁维护，可用响应式PC模板+媒体查询适配手机。
测试时用浏览器开发者工具模拟手机 viewport，或真机访问检查排版和功能是否正常。
基本上就这些，不复杂但容易忽略细节。关键是理清模板路径和CSS断点设置。
