dede图片模板如何适配手机端显示？-DEDE建站-盈思创科技

这个需求非常常见,核心思想是 “一套模板，多端适配”，我们不会为手机单独创建一个模板，而是使用 CSS3 的媒体查询 技术，让同一个模板在不同尺寸的屏幕上自动调整布局和样式。

（图片来源网络，侵删）

下面我将分步为您讲解,从最基础的模板制作到最终的响应式实现。

第一步：准备工作

创建模板文件：
- 在您的 DedeCMS 模板目录（通常是 /templets/default/ 或您自定义的目录）下，创建一个新的模板文件，img_list.htm。
- 在后台“模板管理”中，为这个模板文件创建一个对应的模板风格（选择一个已存在的风格或新建一个）。
创建栏目并绑定模板：
- 在后台“栏目管理”中，创建一个用于存放图片的栏目（图片展示”）。
- 在该栏目的“高级选项”中，找到“列表模板”，选择刚刚创建的 img_list.htm 模板。

第二步：编写基础模板代码（HTML + DedeCMS 标签）

这是模板的核心部分,我们使用 {dede:list} 标签来循环调用文章列表，这里的“文章”就是我们的图片。

（图片来源网络，侵删）

打开 img_list.htm 文件，输入以下基础代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">{dede:field.title/}_{dede:global.cfg_webname/}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入CSS文件，我们后面会把响应式样式写在这里 -->
    <link rel="stylesheet" href="/templets/default/css/style.css">
</head>
<body>
    <div class="main-container">
        <h1>{dede:field.title/}</h1>
        <div class="img-list">
            {dede:list pagesize='12'}
            <div class="img-item">
                <!-- 使用[field:picname/]获取文章中的第一张图片 -->
                <a href="[field:arcurl/]">
                    <img src="[field:picname/]" alt="[field:title/]">
                </a>
                <div class="img-info">
                    <h2><a href="[field:arcurl/]">[field:title/]</a></h2>
                    <p>[field:description function='cn_substr(@me, 100)'/]...</p>
                </div>
            </div>
            {/dede:list}
        </div>
        <!-- 分页 -->
        <div class="page-nav">
            {dede:pagelist listsize='4' listitem='info,index,end,pre,next,pageno'}
        </div>
    </div>
</body>
</html>

代码解释：

{dede:list}: 这是列表循环的开始。pagesize='12' 表示每页显示12条数据。
[field:picname/]: 这是关键标签，用于获取文章内容中的第一张图片的地址，请确保您在发布图片文章时，将图片作为“内容摘要图片”或者直接放在文章内容的最开头。
[field:arcurl/]: 获取文章的链接地址。
[field:title/]: 获取文章标题。
[field:description function='cn_substr(@me, 100)'/]: 获取文章摘要，并用 cn_substr 函数截取前100个字符。
{dede:pagelist}: 调用分页导航。

第三步：编写响应式CSS样式

我们创建一个CSS文件（/templets/default/css/style.css），来定义我们的样式，并实现响应式布局。

打开 style.css 文件，输入以下代码：

（图片来源网络，侵删）

/* 基础样式和电脑端（大屏）样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Microsoft YaHei', sans-serif;
    background-color: #f4f4f4;
}
.main-container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 15px;
}
h1 {
    text-align: center;
    margin-bottom: 30px;
    color: #333;
}
/* 电脑端布局：使用 Flexbox，每行显示3-4张图片 */
.img-list {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    justify-content: space-between; /* 两端对齐 */
}
.img-item {
    width: calc(25% - 15px); /* 4列布局，减去间距 */
    margin-bottom: 20px;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}
.img-item:hover {
    transform: translateY(-5px);
}
.img-item img {
    width: 100%;
    height: 200px;
    object-fit: cover; /* 保证图片不变形 */
    display: block;
}
.img-info {
    padding: 15px;
}
.img-info h2 {
    font-size: 16px;
    margin-bottom: 8px;
}
.img-info p {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}
/* 分页样式 */
.page-nav {
    text-align: center;
    margin-top: 40px;
}
.page-nav a, .page-nav span {
    display: inline-block;
    padding: 5px 12px;
    margin: 0 5px;
    border: 1px solid #ddd;
    border-radius: 3px;
    text-decoration: none;
}
.page-nav a:hover, .page-nav .thisclass {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}
/* ------------------------- 响应式部分 ------------------------- */
/* 1. 平板设备 (屏幕宽度小于 992px) */
@media screen and (max-width: 992px) {
    .img-item {
        width: calc(33.3333% - 15px); /* 改为3列布局 */
    }
}
/* 2. 手机设备 (屏幕宽度小于 768px) */
@media screen and (max-width: 768px) {
    .main-container {
        margin: 10px auto;
    }
    .img-item {
        width: calc(50% - 10px); /* 改为2列布局，间距也相应减小 */
        margin-bottom: 15px;
    }
    .img-item img {
        height: 150px; /* 图片高度也可以调整 */
    }
}
/* 3. 小屏手机设备 (屏幕宽度小于 480px) */
@media screen and (max-width: 480px) {
    .img-item {
        width: 100%; /* 改为单列布局 */
        margin-bottom: 15px;
    }
    .img-item img {
        height: 180px; /* 单列时图片可以更高一些 */
    }
}

CSS代码解释：

基础样式：首先定义了在电脑大屏幕上（默认）的样式，我们使用了 Flexbox 布局，.img-item 的宽度设置为 calc(25% - 15px)，这样就能实现每行4列，并且元素之间有均匀的间距。
媒体查询：这是响应式的核心。@media screen and (max-width: ...) 的意思是“当屏幕宽度小于指定值时，应用下面的CSS规则”。
- @media (max-width: 992px)：当屏幕宽度小于992px（如平板设备）时，.img-item 的宽度变为 calc(33.3333% - 15px)，即每行显示3列。
- @media (max-width: 768px)：当屏幕宽度小于768px（如大部分手机）时，.img-item 的宽度变为 calc(50% - 10px)，即每行显示2列，我们也可以调整一些其他元素的间距和大小。
- @media (max-width: 480px)：当屏幕宽度小于480px（如小屏手机）时，.img-item 的宽度变为 100%，即单列显示，确保内容在小屏幕上也能完整展示。

第四步：优化与注意事项

图片标签 [field:picname/] 的替代方案：
- [field:picname/] 有时不够稳定，如果图片不在文章开头可能无法获取，一个更可靠的方法是使用 {dede:list} 的附加功能，但会增加SQL查询。
- 推荐方案：在发布文章时，手动设置“缩略图”，然后在模板中使用 [field:litpic/] 标签，这个标签专门用于获取缩略图，性能和稳定性都更好。
```
<img src="[field:litpic/]" alt="[field:title/]">
```
<meta name="viewport">：
这个标签在 <head> 中是必须的，它告诉浏览器如何控制页面的尺寸和缩放。width=device-width 确保页面宽度跟随设备屏幕宽度，initial-scale=1.0 确保页面初始缩放比例为100%，没有它，响应式设计将无法正常工作。

图片懒加载：对于图片列表,为了提升页面加载速度，特别是手机端，强烈建议开启“图片懒加载”功能。在 DedeCMS 后台，进入“系统” -> “系统基本参数” -> “性能选项”，找到“是否开启图片本地化”或类似功能，确保图片路径正确。你也可以使用 JavaScript 懒加载库（如 lozad.js）来进一步优化。测试：制作完成后,一定要用浏览器的开发者工具（按 F12）进行测试，切换设备模拟器（手机、平板、桌面），查看在不同尺寸下的布局是否符合预期。

通过以上四个步骤,您就成功创建了一个 DedeCMS 的响应式图片列表模板：创建模板文件 img_list.htm 并绑定到栏目。使用 {dede:list} 和 {dede:pagelist} 标签调用数据。编写CSS，先定义电脑端布局，再通过 @media 媒体查询逐步调整手机和平板的布局。优化细节，如使用 [field:litpic/] 和添加 viewport 这种方法是目前最主流、最高效的响应式建站方式，一套模板即可完美适配所有设备。

dede图片模板如何适配手机端显示？

第一步：准备工作

第二步：编写基础模板代码（HTML + DedeCMS 标签）

第三步：编写响应式CSS样式

第四步：优化与注意事项

相关文章

目录[+]