使用流式布局（百分比宽度）和弹性图片/媒体，而不是固定像素宽度。 这样页面元素就能根据不同屏幕尺寸自动伸缩，始终完美显示。
下面我将从基础到高级,为你提供一套完整的解决方案。
第一步：理解织梦WAP模板的结构
在动手修改之前,我们先快速回顾一下织梦WAP模板的文件结构，你需要修改以下几个核心文件：
index.html: 首页模板。article_list.html: 文章列表页模板。article_article.html: 文章内容页模板。head.htm: 公共头部文件，通常包含网站标题、Logo、导航菜单等。footer.htm: 公共底部文件，通常包含版权信息、友情链接等。style.css: 最关键的样式表文件，所有的自适应样式都在这里定义。
自适应的修改主要就是在这些HTML文件中设置正确的结构,并在 style.css 中编写响应式样式。
第二步：CSS实现自适应的核心技术
这是实现自适应的灵魂,我们需要在 style.css 文件中应用以下几种技术：
视口标签 - 必须添加！
在所有WAP模板的 <head> 部分（通常在 head.htm 中），必须加入以下 <meta> 视口标签，这是告诉浏览器如何控制页面的尺寸和缩放，是移动端自适应的基石。
<!-- 在 head.htm 的 <head> 标签内添加 --> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
width=device-width: 宽度等于设备屏幕的宽度。initial-scale=1.0: 初始缩放比例为1.0，即不缩放。maximum-scale=1.0: 用户最大缩放比例为1.0，禁止用户放大。user-scalable=0: 禁止用户缩放，这个可以根据需要调整，设为1则允许用户缩放。
使用流式布局（百分比宽度）
将之前使用固定像素（如 width: 980px;）的容器，改为使用百分比（width: 100%;）。
修改前 (固定宽度):
.main-container {
width: 980px;
margin: 0 auto;
background-color: #f5f5f5;
}
修改后 (流式宽度):
.main-container {
width: 100%; /* 使用100%宽度，宽度会随父容器变化 */
margin: 0 auto;
background-color: #f5f5f5;
/* 添加一个最大宽度，避免在超大屏幕上内容过宽 */
max-width: 980px;
box-sizing: border-box; /* 强烈推荐，让padding和border不会撑大宽度 */
}
弹性图片和媒体
图片和视频等媒体元素也需要自适应,否则它们会超出屏幕。
修改前:
img {
max-width: 600px; /* 固定最大宽度 */
}
修改后:
img, embed, video, iframe {
max-width: 100%; /* 最大宽度为100%，确保不会超出父容器 */
height: auto; /* 高度自动调整，保持图片原始比例 */
}
使用相对单位
尽量使用 em 或 rem 代替 px 来定义字体大小和间距。em 是相对于父元素字体大小，rem 是相对于根元素 <html> 的字体大小，这使得整体布局可以按比例缩放。
body {
font-size: 16px; /* 基础字体大小 */
}
h1 {
font-size: 1.5em; /* 相当于 16px * 1.5 = 24px */
margin-bottom: 1em; /* 相当于 16px 的下边距 */
}
p {
line-height: 1.6; /* 行高使用倍数，更灵活 */
font-size: 0.9rem; /* 相当于 16px * 0.9 = 14.4px */
}
弹性盒子布局 - 现代、高效的选择
Flexbox 是一种非常强大的CSS布局方式，可以轻松实现复杂的自适应布局，比如导航菜单、图文混排等。
示例：让导航菜单水平排列并换行
/* 假设导航菜单的 class 是 .nav-list */
.nav-list {
display: flex; /* 启用Flexbox */
flex-wrap: wrap; /* 允许项目换行 */
list-style: none; /* 去掉列表前的点 */
padding: 0;
margin: 0;
}
.nav-list li {
flex: 1 1 45%; /* 每个列表项占据1份空间，基准为45%，最小为45% */
margin: 5px; /* 项目间距 */
text-align: center;
}
.nav-list a {
display: block; /* 让链接可以撑满整个li */
padding: 10px 0;
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 5px;
}
这个例子中,无论屏幕多宽，导航项都会自动换行并平均分配空间。
第三步：具体操作步骤（以首页模板为例）
-
备份！备份！备份！ 在修改任何文件之前，请务必备份你的模板文件，以防修改出错无法恢复。
-
修改
head.htm打开/templets/default/wap/head.htm文件，在<head>和</head>标签之间添加视口标签：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
-
修改
style.css打开/templets/default/wap/style.css文件，按照“第二步”中的核心技术进行重写，确保所有容器、图片、字体都使用了响应式的设计原则。 -
修改首页模板
index.html- 检查主容器,如
<div class="main">或<div class="wrap">，确保它没有固定的width属性。 - 检查图片标签
<img>，确保它没有固定的width和height属性（如果有的话，删除它们，CSS会负责控制）。 - 检查表格
<table>，表格是移动端自适应的“杀手”，因为它默认不会收缩，如果必须使用表格，可以尝试用CSStable-layout: fixed;和width: 100%来控制，但最好的方式是避免在移动端使用复杂表格。
- 检查主容器,如
-
修改其他页面模板 重复第4步的操作，对
article_list.html、article_article.html等所有页面模板进行相同的结构调整。
第四步：进阶技巧与常见问题
使用媒体查询 针对不同屏幕优化
媒体查询可以根据设备特性（如屏幕宽度、方向）应用不同的CSS样式，是实现响应式设计的高级技巧。
示例：当屏幕宽度小于480px时（小屏手机），调整布局
/* 默认样式（适用于所有宽度） */
.main-container {
padding: 10px;
}
/* 当屏幕宽度小于等于480px时 */
@media screen and (max-width: 480px) {
.main-container {
padding: 5px; /* 减小内边距 */
}
/* 隐藏一些桌面端才有的元素 */
.desktop-only {
display: none;
}
}
/* 当屏幕宽度大于等于481px时（平板或大屏手机） */
@media screen and (min-width: 481px) {
.main-container {
padding: 20px;
}
/* 在大屏上，让文章列表变成两列 */
.article-item {
float: left;
width: 48%;
margin-right: 2%;
}
}
处理织梦标签生成的固定样式
织梦的某些标签（如{dede:arclist}）可能会生成带有固定宽度的 table，如果你发现自适应后某个部分仍然很宽，请用浏览器开发者工具（F12）检查元素，找到是哪个标签或CSS样式在作祟，然后通过覆盖其样式的方式来解决。
发现 arclist 生成的 table 很宽，可以在 style.css 中强制覆盖：
/* 强制让arclist生成的表格宽度100% */
table {
width: 100% !important; /* !important 用于覆盖内联样式或高优先级样式 */
table-layout: fixed; /* 让表格布局更可控 */
}
字体大小问题
不要在CSS中写死字体大小,而是使用 rem 或 em，可以在 <html> 标签上设置一个基础字体大小，然后用 rem 来控制其他元素。
/* 在 style.css 的最开始设置 */
html {
font-size: 16px; /* 基准大小 */
}
@media screen and (max-width: 480px) {
html {
font-size: 14px; /* 在小屏上缩小基准字体 */
}
}
/* 然后在其他地方使用 rem */
h1 { font-size: 1.8rem; } /* 16px * 1.8 或 14px * 1.8 */
p { font-size: 1rem; } /* 16px * 1 或 14px * 1 */
要让织梦WAP模板自适应屏幕,核心流程如下：
- 添加视口标签：在
head.htm中加入<meta name="viewport">。 - 重构CSS：在
style.css中，将固定宽度改为百分比（width: 100%），图片设置max-width: 100%，字体使用rem/em。 - 简化HTML结构：移除模板中不必要的固定宽度
div和table。 - 利用现代布局：优先使用 Flexbox 布局来处理复杂的对齐和排列问题。
- 使用媒体查询：针对不同屏幕尺寸进行精细化调整，隐藏非必要元素或改变布局。
- 测试与调试：使用浏览器开发者工具的模拟器功能，或在真机上测试不同尺寸下的显示效果。
遵循以上步骤,你的织梦WAP网站就能在各种手机屏幕上获得良好的显示效果。
