“自动适应手机”的核心技术是响应式网页设计，其基本原理是：使用流式布局、相对单位和媒体查询，让网页能够根据用户设备的屏幕尺寸自动调整布局、字体大小和图片等元素的显示方式。

自动适应手机织梦dedecms模板
（图片来源网络，侵删）

下面我将分步为你讲解整个实现流程,从核心概念到具体代码修改。

第一步：理解响应式设计的三大核心技术

在动手之前,你必须理解这三个概念，它们是实现响应式的基础。

视口

视口是浏览器显示网页内容的屏幕区域,默认情况下，移动设备浏览器会模拟桌面浏览器的宽度（通常是980px），然后缩小以显示整个页面，导致页面在小屏幕上显示过小，需要用户手动缩放。

解决方案： 在网页的 <head> 部分添加 <meta name="viewport" ...> 标签，告诉浏览器如何控制页面的尺寸和缩放。

自动适应手机织梦dedecms模板
（图片来源网络，侵删）
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  • width=device-width：设置视口的宽度为设备的屏幕宽度。
  • initial-scale=1.0：初始缩放比例为1.0，即不缩放。
  • maximum-scale=1.0：最大缩放比例为1.0，防止用户放大。
  • user-scalable=no：禁止用户手动缩放，提升移动端体验（可选，但推荐）。

流式布局

传统的网页布局使用固定像素（如 width: 980px;），这在不同屏幕尺寸下表现不佳，流式布局则使用相对单位（如百分比 、em、rem 或 vw/vh）来定义元素宽度。

解决方案： 将容器、列和图片的宽度从固定像素改为百分比。

/* 传统固定布局 */
#main {
    width: 980px;
    margin: 0 auto;
}
/* 流式布局 */
#main {
    width: 95%; /* 占据父容器宽度的95% */
    max-width: 1200px; /* 但最大不要超过1200px，在大屏幕上看起来更舒服 */
    margin: 0 auto;
}

媒体查询

媒体查询是响应式设计的“大脑”，它允许你根据不同的设备特征（如屏幕宽度、高度、方向）来应用不同的CSS样式。

解决方案： 在CSS中使用 @media 规则。

自动适应手机织梦dedecms模板
（图片来源网络，侵删）
/* 默认样式：应用于所有设备 */
#content {
    float: left;
    width: 70%;
}
#sidebar {
    float: right;
    width: 30%;
}
/* 当屏幕宽度小于等于768px时（通常是平板和手机） */
@media screen and (max-width: 768px) {
    #content {
        width: 100%; /* 内容区占满全屏 */
        float: none; /* 取消浮动 */
    }
    #sidebar {
        width: 100%; /* 侧边栏也占满全屏 */
        float: none;
        margin-top: 20px; /* 与内容区增加一些间距 */
    }
}

我们以 768px、992px、1200px 等作为断点来区分不同尺寸的设备。

第二步：修改织梦模板文件

我们将上述理论应用到织梦模板中,你需要修改的是模板目录下的 .html 文件。

修改 head.htm 文件（或在首页模板的 <head> 标签内）

这是最关键的一步,打开你的模板文件，在 <head> 和 </head> 之间加入视口标签和响应式相关的CSS引用。

<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>
    <!-- 引入你的主CSS文件，建议命名为 style.css -->
    <link rel="stylesheet" href="/templets/你的模板目录/css/style.css">
    <!-- 如果需要，可以引入移动端特定的CSS文件 -->
    <link rel="stylesheet" href="/templets/你的模板目录/css/mobile.css" media="screen and (max-width: 768px)">
    {dede:global.cfg_webstats/}
</head>

这里我们推荐使用 移动优先 的策略：

  1. 在 style.css 中编写默认的、面向移动端的简单样式。
  2. 在 mobile.css 中使用媒体查询 @media (min-width: 769px) 来逐步增强桌面端的样式。 这种方式更符合现代前端开发理念，代码更清晰。

修改模板的HTML结构

织梦模板的核心结构通常是头部、导航、主体内容、底部，我们需要确保这些结构是灵活的。

示例：修改 index.htm 的主体结构

{dede:include filename="head.htm"/}
<div class="main-container">
    <!-- 顶部导航/轮播图 -->
    <div class="header-banner">
        {dede:include filename="topbanner.htm"/}
    </div>
    <!-- 主要内容区 -->
    <div class="main-content">
        <!-- 左侧内容列表 -->
        <div class="content-left">
            {dede:arclist titlelen='48' row='10'}
            <div class="article-item">
                <h2><a href="[field:arcurl/]">[field:title/]</a></h2>
                <p>[field:description/]...</p>
            </div>
            {/dede:arclist}
        </div>
        <!-- 右侧边栏 -->
        <div class="content-right">
            {dede:include filename="sidebar.htm"/}
        </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
        {dede:include filename="footer.htm"/}
    </div>
</div>
{dede:include filename="foot.htm"/}

编写响应式CSS样式

这是工作量最大的一步,在你的 style.css 文件中，为上述HTML结构编写样式。

示例：style.css

/* 1. 重置和基础样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 关键！让padding和border不会撑大元素 */
}
body {
    font-family: "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.6;
    font-size: 16px; /* 使用rem更佳，这里为了简单用px */
    color: #333;
}
/* 2. 布局容器 */
.main-container {
    width: 95%;
    max-width: 1200px;
    margin: 0 auto;
}
/* 3. 头部 */
.header-banner {
    width: 100%;
    height: 200px;
    background-color: #f0f0f0;
}
/* 4. 主体内容区 - 移动端默认堆叠 */
.main-content {
    display: flex; /* 使用Flexbox布局，非常方便 */
    flex-wrap: wrap; /* 允许换行 */
}
.content-left {
    flex: 3; /* 占用3份空间 */
    padding: 15px;
}
.content-right {
    flex: 1; /* 占用1份空间 */
    padding: 15px;
}
/* 5. 文章列表样式 */
.article-item {
    border-bottom: 1px solid #eee;
    padding: 15px 0;
}
.article-item h2 {
    font-size: 1.2em;
    margin-bottom: 10px;
}
.article-item h2 a {
    text-decoration: none;
    color: #333;
}
.article-item p {
    color: #666;
}
/* 6. 底部样式 */
.footer {
    text-align: center;
    padding: 20px 0;
    background-color: #333;
    color: #fff;
    margin-top: 30px;
}
/* 7. 媒体查询 - 针对平板和桌面端 */
@media screen and (min-width: 768px) {
    .main-content {
        /* 在大屏幕上，左右两栏并排显示 */
        /* 因为flex-wrap: wrap，所以它们会自动并排 */
    }
    .content-left, .content-right {
        /* 使用百分比宽度更精确控制 */
        width: 75%; /* 左侧内容 */
    }
    .content-right {
        width: 25%; /* 右侧边栏 */
    }
}
/* 8. 媒体查询 - 针对大桌面端 */
@media screen and (min-width: 1200px) {
    .main-container {
        /* 容器宽度固定为最大值 */
    }
    .content-left, .content-right {
        /* 可以进一步调整 */
    }
}

处理图片和Flash

图片是响应式设计中非常重要的一环,图片不能超出其容器。

解决方案： 在CSS中为所有图片添加一个通用样式。

/* 在 style.css 中添加 */
img {
    max-width: 100%; /* 图片最大宽度为100%，不会超出父容器 */
    height: auto;    /* 高度自动调整，保持比例 */
}

对于Flash（如果模板还在用），需要用JavaScript替换，因为Flash在移动端不支持，通常会用 <video> 标签或HTML5视频播放器来替代。

第三步：测试与优化

测试工具

  • 浏览器开发者工具：这是最方便的工具，按 F12 打开，然后点击左上角的手机/平板图标，可以模拟各种设备尺寸，并实时查看效果。
  • 真机测试：将你的网站部署到服务器上，用手机连接同一个Wi-Fi，通过手机浏览器访问你的网站IP地址或域名，这是最真实的测试。

织梦DedeCMS的特定优化

  • 图片自适应：除了CSS，你还可以使用织梦的标签来控制图片大小。
    {dede:field name='imglink'/} <!-- 图片链接 -->
<img src="{dede:field name='litpic'/}" alt="{dede:field name='title'/}" style="max-width:100%;height:auto;" />
  • 分页列表：确保你的列表分页样式也是响应式的，通常分页导航在小屏幕上会变成一行显示，或者使用“上一页/下一页”的简化模式。
  • 表单元素：移动端的输入框和按钮需要足够大，方便用户点击，可以增加它们的 padding 和 font-size。

制作响应式织梦模板的步骤

  1. 规划布局：想清楚手机、平板、桌面三种设备下，你的页面布局分别是什么样的。
  2. 修改 head.htm：加入 <meta name="viewport"> 和响应式CSS引用。
  3. 使用流式HTML结构：用 <div> 等块级元素搭建灵活的框架，避免使用固定宽度的表格。
  4. 编写CSS：
    • 使用 box-sizing: border-box。
    • 使用百分比、Flexbox或Grid布局。
    • 为图片添加 max-width: 100%。
    • 使用媒体查询 @media 针对不同屏幕尺寸调整样式。
  5. 测试：反复使用浏览器开发者工具和真机进行测试，不断调整细节。
  6. 发布：将修改好的模板文件上传到你的网站服务器，并生成首页和列表页。

遵循以上步骤,你就能成功地将你的织梦DedeCMS网站改造为自动适应手机的响应式网站。