织梦pc 移动共用模板-织梦建站-盈思创科技

核心理念

响应式网页设计的核心思想是：使用一套模板，通过CSS媒体查询（Media Queries）和弹性布局（如Flexbox、Grid），根据用户访问设备的屏幕尺寸（宽度、高度等），自动调整网页的布局、字体大小、图片大小等元素，以达到在不同设备上都有良好显示效果的目的。

（图片来源网络，侵删）

这与你可能听过的“PC和移动端完全两套独立模板，通过手机访问自动跳转”的方案完全不同，响应式模板的优势在于：

维护成本低：只需维护一套模板、一套内容。
SEO友好：所有流量都指向同一个URL，权重集中，搜索引擎更容易收录。
用户体验好：用户访问同一个链接，设备切换时无需重新加载页面。

详细实现步骤

我们将以一个常见的织梦模板结构为例,一步步教你如何将一个PC模板改造为响应式模板。

第1步：准备工作

选择一个PC模板：你需要一个你喜欢的PC端织梦模板。
了解CSS媒体查询：这是响应式设计的核心技术，你需要知道如何使用 @media 规则来针对不同的屏幕尺寸编写不同的CSS样式。
- 常见的断点（Breakpoints）：
  - @media (max-width: 768px)：通常用于平板设备。
  - @media (max-width: 480px)：通常用于手机设备。
  - 你也可以自定义断点,@media (max-width: 1024px) 等。
备份：在修改任何文件之前，请务必备份你的网站数据、数据库和模板文件！

第2步：修改模板文件结构

找到模板文件：登录织梦后台，进入【模板】->【默认模板管理】，找到你需要修改的模板文件，通常是 index.htm（首页）、article_article.htm（文章页）、list_article.htm（列表页）等。
引入响应式CSS文件：
（图片来源网络，侵删）
- 在模板的 <head> 标签内，引入一个专门用于响应式样式的CSS文件，这是一个好习惯，可以保持主CSS文件的整洁。
- 在 index.htm 的 <head> 部分添加如下代码：
```
<link rel="stylesheet" href="{dede:global.cfg_templets_skin/}/responsive.css" />
```
  这里的 {dede:global.cfg_templets_skin/} 会自动解析为你当前模板的目录路径，请确保你的模板目录下有一个名为 responsive.css 的文件。
设置视口：
- 这是最关键的一步！在 <head> 标签内，添加 viewport meta标签，告诉浏览器如何控制页面的尺寸和缩放。
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
  这个标签必须添加,否则在手机上浏览时，页面可能会被缩小显示，导致字体和图片都很小。

第3步：修改HTML结构和CSS样式

这是改造的核心工作,需要结合你的具体模板进行。

（图片来源网络，侵删）

布局容器化：

将你的页面主要布局部分（如头部、主体、底部）用 <div> 包裹起来，并给它们设置一个 class，container、header、main-content、footer。
在CSS中,为这些容器设置一个最大宽度（max-width）和居中（margin: 0 auto），这样在大屏幕上不会显得过宽，在小屏幕上则会自动拉伸。

HTML示例 (index.htm):

<div class="header">...</div>
<div class="main-content">
  <div class="left-column">...</div>
  <div class="right-column">...</div>
</div>
<div class="footer">...</div>

CSS示例 (style.css):

.main-content {
  width: 100%;
  max-width: 1200px; /* PC端最大宽度 */
  margin: 0 auto;
  display: flex; /* 使用弹性布局 */
}
.left-column {
  flex: 3; /* 占用3份空间 */
}
.right-column {
  flex: 1; /* 占用1份空间 */
}

使用媒体查询覆盖样式：

打开你新创建的 responsive.css 文件，在里面编写针对不同屏幕尺寸的CSS规则。规则是：先写PC端的默认样式，再在媒体查询中写移动端的覆盖样式。

CSS示例 (responsive.css):

/* 默认样式是PC端，在 style.css 中已经定义 */
/* 当屏幕宽度小于等于768px时（平板和手机） */
@media (max-width: 768px) {
  .main-content {
    flex-direction: column; /* 将左右布局改为上下布局 */
  }
  .left-column, .right-column {
    width: 100%; /* 左右两栏都占满宽度 */
  }
}
/* 当屏幕宽度小于等于480px时（小屏手机） */
@media (max-width: 480px) {
  .header h1 {
    font-size: 20px; /* 缩小标题字体 */
  }
  /* 可以隐藏一些PC端才有的元素，比如广告位 */
  .ad-banner {
    display: none;
  }
}

图片响应式处理：

让图片自动适应容器宽度,不会撑破页面。

在 responsive.css 中添加全局样式：

img {
max-width: 100%; /* 图片最大宽度为100%，不会超过其父容器 */
height: auto;    /* 高度自动调整，保持图片比例 */
}

字体和导航栏响应式：

字体：可以使用 rem 单位，或者通过媒体查询改变 px 值。
导航栏：PC端是横向多栏，移动端通常变成一个“汉堡”菜单，点击后展开，这需要用CSS来控制默认隐藏和点击后的显示，有时也需要一点点JavaScript。

导航栏示例 (responsive.css):

/* PC端导航栏样式 */
.nav {
  display: flex;
  list-style: none;
}
.nav li {
  margin-left: 20px;
}
/* 移动端导航栏样式 */
@media (max-width: 768px) {
  .nav {
    /* 默认隐藏，或者改为汉堡图标 */
    display: none; /* 或者 display: block; */
  }
  .menu-toggle {
    /* 显示一个汉堡图标按钮 */
    display: block;
  }
}

第4步：织梦标签的注意事项

图片自适应：
- 织梦的图片标签 [field:pic/] 默认输出的是固定大小的缩略图，为了实现响应式，你可能需要修改系统标签，使其调用原图或更大尺寸的图片，然后通过CSS的 max-width: 100% 来控制其显示大小。
- 可以通过修改织梦的 include/arc.listview.class.php 等文件来改变标签行为，但更推荐的是直接在模板中使用 [field:litpic/] 并通过CSS控制。
分页：
- 织梦默认的分页标签 {dede:pagelist/} 在移动端可能会很长，你可以通过CSS将其隐藏，并引入一个更简洁的移动端分页组件，或者使用“加载更多”功能。

第5步：测试

使用浏览器开发者工具：这是最方便的测试方法。
- 在Chrome或Firefox中打开你的网页,按 F12 打开开发者工具。
- 点击设备模拟按钮（通常是一个手机或平板图标）。
- 你可以自由切换不同的设备尺寸,实时查看你的页面效果，并可以方便地修改CSS进行调试。
真机测试：

最终一定要在真实的手机和平板上进行测试,因为模拟器和真机在某些方面（如触摸事件、渲染引擎）可能存在差异。

响应式模板 vs. 独立移动模板

特性	响应式模板 (共用一套)	独立移动模板 (两套模板)
实现方式	CSS媒体查询 + 弹性布局	通过JS或PHP判断设备，跳转到 `m/` 目录
维护成本	低，只需维护一套模板和内容	高，需要维护两套模板和内容，同步更新麻烦
SEO	好，URL统一，权重集中	较差，权重分散在两个URL上
开发速度	初期改造稍慢，但后续维护快	初期可以快速做一个简化版，但长期维护复杂
用户体验	流畅，切换设备无需刷新页面	切换设备需要重新加载页面，体验稍差
适用场景	绝大多数现代网站，特别是内容型、展示型网站	对移动端有完全不同、极度定制化需求的复杂应用

对于99%的织梦网站项目，强烈推荐使用响应式模板方案。 它是未来的趋势，也是目前公认的最佳实践，虽然初期需要一些CSS和HTML的知识投入，但从长远来看，它为你节省的时间和精力是巨大的。

织梦pc 移动共用模板