手机wap模块织梦模板如何自适应屏幕？-网站模板-锦华智联科技

核心理念：什么是自适应屏幕？

自适应屏幕，也叫响应式设计，意味着你的网站布局会根据用户访问的设备屏幕尺寸（如手机、平板、桌面电脑）自动调整，以提供最佳的浏览体验，对于织梦WAP模板来说，我们主要关注的是手机屏幕,但一个好的模板也应该能平滑地过渡到平板和桌面设备。

（图片来源网络，侵删）

实现自适应主要有三种技术：

流式布局：使用百分比（%）而不是固定像素来定义宽度,让容器能根据父容器的大小伸缩。
弹性图片和媒体：图片和视频等媒体也能像容器一样缩放,不会撑破布局。
媒体查询：这是最关键的技术，它允许我们使用CSS为不同的屏幕尺寸（如宽度小于768px的手机）应用不同的样式规则。

制作步骤详解

第一步：准备工作

安装织梦CMS：确保你的服务器上已经安装好了织梦DedeCMS。
了解织梦模板结构：一个标准的织梦模板通常包括以下文件：
- index.html 或 default.html：首页模板。
- article_article.html页模板。
- list_栏目ID.html：列表页模板。
- head.htm：公共头部文件（包含logo、导航等）。
- footer.htm：公共底部文件（包含版权、返回首页等）。
- style.css：CSS样式文件。
创建WAP模板目录：在织梦后台的“模板管理” -> “默认模板管理”中，建议你创建一个新的WAP模板风格，例如命名为 mobile,这样WAP模板和PC模板就不会互相干扰。
（图片来源网络，侵删）

第二步：构建HTML骨架（移动优先）

在编写HTML时，我们先从移动端的简单结构开始，这符合“移动优先”的原则。

设置视口

这是最重要的一步！在所有WAP模板的 <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：禁止用户手动缩放（可选，但通常WAP站会禁用以获得统一体验）。

使用语义化HTML5标签

（图片来源网络，侵删）

为了更好的结构和可访问性,推荐使用HTML5的标签。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">{dede:global.cfg_webname/}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="{dede:global.cfg_templets_skin/}/style.css">
    <!-- 其他meta标签，如关键词、描述 -->
</head>
<body>
    <!-- 头部 -->
    {dede:include filename="head.htm"/}
    <!-- 主要内容区 -->
    <main class="main-content">
        {dede:arclist titlelen='30' row='5'}
        <article class="post-item">
            <h2><a href="[field:arcurl/]">[field:title/]</a></h2>
            <p class="post-meta">[field:pubdate function="MyDate('Y-m-d',@me)"/]</p>
            <p class="post-summary">[field:description function="cn_substr(@me, 100)"/]...</p>
        </article>
        {/dede:arclist}
    </main>
    <!-- 底部 -->
    {dede:include filename="footer.htm"/}
</body>
</html>

第三步：编写CSS样式（实现自适应）

我们为上面的HTML骨架编写CSS,使其在手机上看起来美观。

重置和基础样式

/* 在 style.css 开头 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 盒模型计算方式，让padding和border不会撑大元素 */
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px; /* 设置一个基础字号，方便rem单位计算 */
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
}
a {
    color: #007bff;
    text-decoration: none;
}

布局容器 区设置一个最大宽度,并在大屏幕上居中。

.main-content {
    max-width: 1200px; /* 在大屏幕上限制最大宽度 */
    margin: 0 auto; /* 水平居中 */
    padding: 0 15px; /* 左右留出一些边距 */
}
/* 当屏幕宽度小于768px时（平板和手机） */
@media screen and (max-width: 768px) {
    .main-content {
        max-width: 100%; /* 在小屏幕上，宽度占满 */
        padding: 0 10px; /* 减少边距 */
    }
}

文章列表项

使用流式布局和弹性图片。

.post-item {
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.post-item h2 a {
    font-size: 1.2rem;
    color: #222;
    margin-bottom: 8px;
    display: block;
}
.post-meta {
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 10px;
}
.post-summary {
    font-size: 0.9rem;
    color: #666;
}
/* 图片自适应 */
.post-item img {
    max-width: 100%; /* 图片最大宽度为父容器宽度 */
    height: auto; /* 高度自动，保持比例 */
}

导航栏

移动端的导航栏通常是一个简洁的顶部栏,点击后展开菜单。

head.htm 示例：

<header class="header">
    <div class="header-container">
        <a href="{dede:global.cfg_cmsurl/}/" class="logo">网站Logo</a>
        <button class="menu-toggle" id="menu-toggle">☰</button>
    </div>
    <nav class="main-nav" id="main-nav">
        <ul>
            {dede:channel type='top' currentstyle="<li class='active'><a href='~typelink~'>~typename~</a></li>"}
            <li><a href='[field:typelink/]'>[field:typename/]</a></li>
            {/dede:channel}
        </ul>
    </nav>
</header>

CSS 样式：

.header {
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
}
.logo {
    font-size: 1.5rem;
    font-weight: bold;
}
.menu-toggle {
    display: block; /* 默认显示在移动端 */
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}
.main-nav {
    display: none; /* 默认隐藏菜单 */
    background: #fff;
}
.main-nav ul {
    list-style: none;
}
.main-nav ul li {
    border-bottom: 1px solid #eee;
}
.main-nav ul li a {
    display: block;
    padding: 12px 15px;
    color: #333;
}
/* 当屏幕足够大时（平板和桌面） */
@media screen and (min-width: 769px) {
    .menu-toggle {
        display: none; /* 隐藏汉堡菜单按钮 */
    }
    .main-nav {
        display: block !important; /* 强制显示导航菜单 */
    }
    .header-container {
        padding: 15px;
    }
    .main-nav ul {
        display: flex; /* 横向排列 */
        gap: 20px; /* 项目间距 */
    }
    .main-nav ul li {
        border-bottom: none;
    }
    .main-nav ul li a {
        padding: 0;
    }
}

JavaScript（用于菜单切换）

你需要在模板底部引入一个简单的JS来控制菜单的显示和隐藏。

<!-- 在 body 结束标签前 -->
<script>
document.getElementById('menu-toggle').addEventListener('click', function() {
    const nav = document.getElementById('main-nav');
    if (nav.style.display === 'block') {
        nav.style.display = 'none';
    } else {
        nav.style.display = 'block';
    }
});
</script>

第四步：织梦标签的优化

摘要长度：在列表页，使用 function="cn_substr(@me, 100)" 来控制摘要长度,避免过长。
图片缩放：确保织梦上传的图片本身不会过大，你可以在后台设置缩略图尺寸，或者在CSS中已经通过 max-width: 100% 进行了控制。
分页：织梦默认的分页标签 {dede:pagelist/} 在移动端可能不太美观，你可以用CSS来美化它,或者寻找更现代的分页插件。

总结与最佳实践

移动优先：先为小屏幕设计，然后通过媒体查询逐步增强体验,这样逻辑更清晰。
视口是灵魂：忘记设置viewport,你的自适应设计就无从谈起。
弹性单位：多使用、vw/vh、rem 等相对单位，少用固定的 px。
媒体查询是关键：以 max-width: 768px 作为平板和手机的主要断点，max-width: 1024px 作为平板和桌面的断点,是常见的做法。
测试，测试，再测试：一定要在不同的真机（iPhone, Android）和各种浏览器的开发者工具（模拟不同设备）上进行测试。

通过以上步骤，你就可以为织梦CMS创建一个功能完善、体验良好的自适应手机WAP模板了。