“自适应”的核心思想是一套代码，多端适配，不再是PC一个模板，手机一个模板，而是通过CSS媒体查询等技术，让同一个页面在不同尺寸的设备上（PC、平板、手机）都能有良好的显示效果。
以下是实现织梦自适应的详细步骤,从基础到进阶，你可以根据自己的需求选择。
第一步：准备工作（心态和工具）
- 心态准备：修改模板文件有风险，请务必备份你的网站程序和数据库！
- 工具准备：
- 代码编辑器：如 VS Code、Sublime Text、Notepad++ 等，不要用记事本。
- 浏览器开发者工具：这是调试自适应布局的利器，按
F12打开，它可以模拟不同设备、实时修改CSS并查看效果。 - FTP工具：如 FileZilla，用于上传下载文件。
第二步：核心修改思路
织梦自适应的核心是 “响应式模板”，主要包含以下几个部分：
- HTML结构：使用HTML5语义化标签（如
<header>,<nav>,<main>,<section>,<footer>）来组织页面，这有助于SEO和结构清晰。 - 视口设置：在
<head>标签内加入<meta name="viewport" content="width=device-width, initial-scale=1.0">，这是移动端自适应的灵魂，它告诉浏览器以设备的宽度来渲染页面，并禁止初始缩放。 - CSS媒体查询：这是自适应的核心武器，通过
@media规则，为不同屏幕尺寸的设备编写不同的CSS样式。 - 弹性布局：使用相对单位（如 ,
rem,em,vw/vh）代替固定的像素单位（px），让页面元素能够根据屏幕大小进行缩放。 - 图片和媒体：使用相对单位或
max-width: 100%来确保图片和视频不会溢出容器。
第三步：具体操作步骤
步骤1：修改首页模板 (index.htm)
这是最关键的一步,因为首页的流量最大。
-
打开
index.htm文件：通常位于/templets/你的模板文件夹/目录下。 -
在
<head>部分添加视口标签：<head> <meta charset="UTF-8"> <title>{dede:global.cfg_webname/}</title> <!-- 在这里添加视口标签 --> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link rel="stylesheet" href="{dede:global.cfg_cmspath/}/static/css/style.css"> <!-- 假设你的CSS文件在这里 --> {dede:global.cfg_webstyle/} </head> -
引入CSS媒体查询：
- 方法A（推荐）： 在你的主CSS文件（如
style.css）末尾添加媒体查询代码，这样所有样式都在一个文件里，方便管理。 - 方法B： 创建一个专门的移动端CSS文件（如
mobile.css），然后在index.htm的<head>中通过<link>标签引入，并用媒体查询控制其生效时机。
我们以方法A为例,修改你的CSS文件 (
style.css)：/* 默认样式（PC端） */ body { font-size: 16px; } .header { width: 1200px; margin: 0 auto; height: 100px; background: #333; } .main-content { width: 1200px; margin: 0 auto; } .sidebar { float: right; width: 300px; } .article-list { float: left; width: 900px; } /* 平板设备 (屏幕宽度小于 992px) */ @media screen and (max-width: 992px) { body { font-size: 15px; } .header { width: 100%; } /* 宽度变为100% */ .main-content { width: 100%; } .sidebar { float: none; width: 100%; } /* 侧边栏放到下面 */ .article-list { float: none; width: 100%; } } /* 手机设备 (屏幕宽度小于 768px) */ @media screen and (max-width: 768px) { body { font-size: 14px; } .header { height: 60px; } /* 缩小头部高度 */ .main-content { padding: 10px; } /* 增加内边距 */ .article-item { margin-bottom: 20px; } /* 增加文章间距 */ } - 方法A（推荐）： 在你的主CSS文件（如
-
使用弹性布局优化CSS： 将固定的
px值改为相对的 或rem，将.header { width: 1200px; }改为.header { width: 100%; max-width: 1200px; }，这样在PC端它最大是1200px，但在小屏幕上会自动缩小。
步骤2：修改列表页模板 (list_*.htm)
列表页的修改方法和首页基本一致。
- *打开 `list_.htm
**（如list_article.htm`）。 - 添加视口标签：和首页一样，在
<head>中添加<meta name="viewport"...>。 - 引入和修改CSS：确保列表页引用的CSS文件和首页是同一个，或者也包含了相应的媒体查询代码，然后根据列表页的布局，用媒体查询调整分页、文章列表等元素的样式。
步骤3：修改文章页模板 (article_*.htm)
文章页的重点是内容区域和评论区的自适应。
- *打开 `article_.htm`**。
- 添加视口标签：同上。
- 区域CSS：
- 的容器（如
.article-content）的宽度设置为100%或max-width: 100%。 - 确保文章内的图片
max-width: 100%，高度自动，防止图片撑破页面。.article-content { width: 100%; max-width: 800px; /* PC端有最大宽度，小屏幕时自动收缩 */ margin: 0 auto; padding: 0 15px; /* 左右留出边距 */ } .article-content img { max-width: 100%; height: auto; }
- 的容器（如
步骤4：修改头部和底部模板 (head.htm, footer.htm)
如果你的导航菜单在PC端是多行横向的,在手机端需要变成汉堡菜单，那么就需要修改 head.htm。
-
创建一个汉堡菜单：
- 在
head.htm中，除了PC的导航<nav>，再添加一个手机端的汉堡菜单按钮（通常是三条横线）。 - 用CSS默认隐藏汉堡菜单和手机端的导航栏,在媒体查询中当屏幕变小时，隐藏PC导航，显示汉堡菜单和手机导航。
- 在
-
使用JavaScript实现菜单切换：
写一小段JS代码,点击汉堡菜单时，切换手机导航栏的显示和隐藏。
第四步：进阶优化（推荐）
使用移动端跳转（MIP或AMP）
虽然响应式设计很好,但对于老旧手机或网络不佳的情况，加载速度可能较慢，织梦官方也支持MIP（Mobile Pages）和AMP（Accelerated Mobile Pages）技术。
- 原理：生成一套专门为移动端优化的HTML页面，加载速度极快。
- 如何实现：
- 在后台开启MIP或AMP功能。
- 下载官方提供的MIP/AMP模板。
- 将这些模板上传到
/templets/目录下。 - 后台会自动为移动端用户（通过User-Agent识别）跳转到这些MIP/AMP页面。
这是一种“自适应”之外的另一种解决方案，响应式是“一套代码”，MIP/AMP是“两套代码”，可以根据网站需求选择。
使用成熟的响应式模板
如果你对代码不熟悉,最简单的方法是直接购买或下载一个已经做好自适应的织梦模板，这样可以省去大量调试时间，确保效果。
总结与自查清单
完成修改后,通过以下方式检查你的网站：
- 手动测试：用不同设备（手机、平板、PC）访问网站，查看布局是否错乱、文字是否过小、图片是否溢出。
- 浏览器开发者工具：
- 按
F12打开。 - 点击左上角的手机/平板图标，选择不同的设备进行模拟测试。
- 使用“响应式设计模式”（一个像手机和电脑叠在一起的图标），可以任意拖动屏幕宽度来实时查看效果。
- 按
- 在线工具：
- Google Mobile-Friendly Test：谷歌官方的移动设备友好性测试工具。
- 百度移动适配检测：百度官方的检测工具。
修改流程回顾：
- 备份！备份！备份！
- 修改
index.htm：添加viewport，调整CSS（使用媒体查询和弹性布局）。 - 同步修改
list_*.htm和article_*.htm：确保所有页面都遵循相同的规则。 - 优化特殊元素：如导航菜单（汉堡菜单）、图片、评论区。
- 全面测试：使用多种工具和设备进行测试。
希望这份详细的指南能帮助你成功地将织梦网站修改为自适应布局！
