使用响应式网页设计，即一套模板代码，通过CSS媒体查询等技术，在不同尺寸的设备上（手机、平板等）呈现出不同的布局和样式。
（图片来源网络，侵删）
下面我将从核心原理、具体步骤、代码示例和注意事项四个方面,为你提供一份详细的操作指南。
核心原理：响应式设计
响应式设计主要依赖以下三个技术：
viewport(视口) 元签：这是移动端自适应的基石，它告诉浏览器如何控制页面的尺寸和缩放，没有它，你的页面在手机上会以桌面版的宽度显示,然后用户需要手动缩放才能看清。- 流式布局：使用相对单位（如百分比 ）而不是固定单位（如像素
px）来设置宽度,让页面元素能够根据屏幕宽度自动伸缩。 - 媒体查询：这是响应式设计的“大脑”，它允许你根据设备的特定特征（如屏幕宽度、高度、方向等）来应用不同的CSS样式。
具体实现步骤
第1步：设置正确的 viewport
这是必须做的第一步，在你的WAP模板的 <head> 标签内,添加以下代码：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">{dede:global.cfg_webname/}</title>
<!-- 其他 meta 标签和 CSS/JS 引入 -->
</head>
viewport 标签参数解释：
（图片来源网络，侵删）
width=device-width：设置页面宽度等于设备屏幕的宽度。initial-scale=1.0：设置页面的初始缩放比例为1.0,即不缩放。maximum-scale=1.0：允许用户缩放到的最大比例是1.0,即禁止放大。user-scalable=no：禁止用户手动缩放，这可以防止用户通过缩放来破坏你的布局，提升移动端体验。（可选，但推荐）
第2步：引入核心CSS文件（推荐）
创建一个专门用于移动端的自适应CSS文件，mobile.css,在你的模板头部引入它：
<link rel="stylesheet" type="text/css" href="/templets/你的默认模板名/style/mobile.css" />
第3步：使用流式布局（百分比宽度）
在 mobile.css 中,将容器和主要内容的宽度设置为百分比。
示例：
假设你的模板主体结构如下：
（图片来源网络，侵删）
<div class="main-container">
<div class="header">头部</div>
<div class="content">
{dede:arclist titlelen='30' row='5'}
<div class="article-item">
<a href="[field:arcurl/]">[field:title/]</a>
</div>
{/dede:arclist}
</div>
<div class="footer">底部</div>
</div>
在 mobile.css 中,你可以这样设置样式：
/* 清除默认边距和填充 */
* {
margin: 0;
padding: 0;
box-sizing: border-box; /* 盒模型计算，让 padding 不会撑大元素 */
}
/* 主容器宽度为屏幕的100% */
.main-container {
width: 100%;
max-width: 720px; /* 可选：设置一个最大宽度，防止在超大屏幕上内容过宽 */
margin: 0 auto; /* 居中显示 */
}
.header, .footer {
width: 100%;
padding: 10px;
background-color: #f0f0f0;
text-align: center;
}
区域宽度100% */
.content {
width: 100%;
padding: 10px;
}
/* 文章列表项，宽度为50%，并排显示 */
.article-item {
width: 50%;
float: left; /* 使用浮动来实现并排 */
padding: 10px;
box-sizing: border-box;
}
.article-item a {
display: block;
text-decoration: none;
color: #333;
}
第4步：使用媒体查询进行精细控制
媒体查询是实现“响应式”的关键，它可以根据屏幕宽度“断点”来应用不同的样式。
常用断点参考：
- 小屏幕手机 ( < 576px )
- 大屏幕手机 ( >= 576px )
- 平板 ( >= 768px )
- 桌面 ( >= 992px )
示例：
继续上面的例子，我们希望在屏幕宽度大于 480px 时，每行显示3个文章,而不是2个。
在 mobile.css 中添加以下代码：
/* 默认（小于480px）每行2个，已在上面设置 */
/* 当屏幕宽度大于等于480px时 */
@media screen and (min-width: 480px) {
.article-item {
width: 33.333%; /* 1/3 */
}
}
/* 当屏幕宽度大于等于768px时（比如平板横屏） */
@media screen and (min-width: 768px) {
.article-item {
width: 25%; /* 1/4 */
}
}
注意： CSS 的加载顺序很重要，先写默认样式（针对最小屏幕）,然后通过媒体查询逐步覆盖和修改样式。
第5步：处理图片和媒体
图片也是自适应中需要特别注意的一环，如果图片是固定宽度的,很可能会撑破容器。
解决方案：
在 mobile.css 中为所有图片设置一个最大宽度,并保持其原始比例。
img {
max-width: 100%; /* 图片最大宽度为容器宽度 */
height: auto; /* 高度自动调整，保持比例 */
}
这样，无论多大的图片,都不会超过其父容器的宽度。
织梦模板中常见场景的自适应
导航栏自适应
桌面版的横向导航在手机上会变成一个垂直列表，或者一个“汉堡菜单”。
方案A：简单垂直列表（推荐新手）
<!-- 在手机模板中，直接使用垂直列表 -->
<div class="mobile-nav">
{dede:channel type='top' currentstyle="<a href='~typelink~' class='thisclass'>~typename~</a>"}
<a href="[field:typelink/]">[field:typename/]</a>
{/dede:channel}
</div>
<style>
.mobile-nav a {
display: block; /* 让每个链接占满一行 */
width: 100%;
padding: 12px;
text-align: center;
border-bottom: 1px solid #eee;
}
</style>
方案B：响应式导航（汉堡菜单）
这需要一些JavaScript，当屏幕宽度变小时，隐藏主菜单，只显示一个汉堡图标；点击图标时,再显示菜单。
<div class="mobile-menu-toggle">☰</div>
<div class="mobile-nav" style="display: none;">
{dede:channel type='top'}
<a href="[field:typelink/]">[field:typename/]</a>
{/dede:channel}
</div>
<script>
document.querySelector('.mobile-menu-toggle').addEventListener('click', function() {
document.querySelector('.mobile-nav').style.display =
document.querySelector('.mobile-nav').style.display === 'none' ? 'block' : 'none';
});
</script>
<style>
/* 默认隐藏移动端导航 */
.mobile-nav {
display: none;
}
/* 当屏幕宽度大于768px时，显示桌面版导航，隐藏汉堡菜单 */
@media screen and (min-width: 768px) {
.mobile-menu-toggle {
display: none;
}
.mobile-nav {
display: block; /* 这里换成你的桌面版导航样式 */
/* ... */
}
}
</style>
列表页自适应
如上文第3步和第4步所示,使用百分比宽度和媒体查询来控制每行显示的文章数量。
内容页自适应
页相对简单,主要是确保内容区和图片自适应。
<div class="article-content">
{dede:field.body/}
</div>
<style>
.article-content {
width: 100%;
padding: 15px;
word-wrap: break-word; /* 防止长单词或链接撑破容器 */
}
.article-content img {
max-width: 100%;
height: auto;
}
</style>
重要注意事项和最佳实践
- 使用单独的移动模板：强烈建议为WAP模块创建一套独立的模板文件（如
index_mobile.htm,list_mobile.htm等），而不是在桌面模板里用复杂的CSS去隐藏/显示元素，这样代码更清晰,加载速度也更快。 - 避免使用固定宽度的单位：在移动端CSS中，尽量使用
rem,em, ,vw/vh等相对单位，少用px，如果必须用px,也要结合媒体查询来调整。 - 字体大小：同样建议使用
rem单位。rem相对于根元素<html>的字体大小，方便全局统一缩放，可以设置html { font-size: 16px; }，然后其他元素如p { font-size: 1rem; }(即16px)。 - 测试，测试，再测试：一定要在不同的设备和浏览器上测试你的模板，可以使用浏览器的开发者工具模拟不同手机型号,或者直接用真机访问。
- 性能优化：移动端网络可能较慢，确保图片已压缩，并考虑使用
srcset属性为不同分辨率的设备提供不同尺寸的图片,以加快加载速度。
通过以上步骤，你就可以轻松地为你的织梦WAP模块模板打造一个流畅、美观的自适应界面了。
