织梦自适应模板制作要点

自适应（响应式）模板是当前织梦建站的主流方向，一套模板同时服务 PC 和移动端，省去双模板维护成本，也利于 SEO 统一。但响应式不是简单加个 viewport 就完事，从断点规划、栅格布局到织梦标签适配都有一套规范做法。本文梳理制作过程中的关键要点。

一、viewport 必须正确设置

所有自适应模板的 <head> 里必须有这行：

<meta name="viewport" 
  content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">

几个易错点：

width=device-width 不能写成固定值如 width=1200
不要加 user-scalable=no，会损害无障碍访问，百度也会降权
initial-scale=1.0 保证初始不缩放

织梦移动端如果同时存在 /m/ 目录和自适应模板，会产生跳转冲突。做自适应就不要启用移动端模板，两者只能选一。

二、断点规划要符合主流设备

常见三段式断点：

/* 默认移动端样式 */
.container{ width:100%; padding:0 15px; }

/* 平板 768px 以上 */
@media (min-width:768px){
  .container{ max-width:750px; }
  .grid{ display:grid; grid-template-columns:1fr 1fr; }
}

/* PC 1024px 以上 */
@media (min-width:1024px){
  .container{ max-width:1200px; }
  .grid{ grid-template-columns:1fr 1fr 1fr; }
}

/* 大屏 1440px 以上 */
@media (min-width:1440px){
  .container{ max-width:1400px; }
}

原则是“移动优先”，默认写手机样式，再用 min-width 向上扩展。这样手机加载的 CSS 体积小，渲染快。

三、栅格布局用 CSS Grid 或 Flex

不要再用老旧的 float 布局做自适应。推荐 CSS Grid：

.news-list{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:20px;
}
.news-item{
  background:#fff;
  padding:15px;
  border-radius:6px;
}

auto-fill 配合 minmax 能根据容器宽度自动排列列数，无需写多个断点，是最省心的响应式栅格方案。

四、图片自适应处理

图片必须设置最大宽度，防止超出容器：

img{
  max-width:100%;
  height:auto;
  display:block;
}

织梦内容里的编辑器图片通常带 width 和 height 属性，会被固定尺寸。解决办法是在模板输出时用正则去掉这些属性：

{dede:field.body runphp="yes"}
@me=preg_replace('/(width|height)="\d*"\s*/','',@me);
{/dede:field}

或者用 CSS 强制覆盖：

.article-content img{
  max-width:100% !important;
  height:auto !important;
}

五、织梦标签的响应式适配

1. arclist 列表输出自适应结构

<div class="news-list">
{dede:arclist row="12" typeid="1"}
  <article class="news-item">
    <a href="[field:arcurl/]" class="news-img">
      <img src="[field:litpic/]" alt="[field:title/]">
    </a>
    <h3><a href="[field:arcurl/]">[field:title/]</a></h3>
    <p>[field:description function="cn_substr(@me,120)"/]</p>
  </article>
{/dede:arclist}
</div>

2. 导航栏移动端折叠

PC 端横排导航，移动端折叠成汉堡菜单。用纯 CSS 实现：

#nav-toggle{ display:none; }
@media(max-width:768px){
  #nav-toggle{
    display:block;
    width:30px; height:30px;
    position:relative;
  }
  #nav-toggle span,
  #nav-toggle span::before,
  #nav-toggle span::after{
    content:""; display:block;
    width:100%; height:3px;
    background:#333;
    position:absolute;
    transition:.3s;
  }
  #nav-toggle span{ top:14px; }
  #nav-toggle span::before{ top:-8px; }
  #nav-toggle span::after{ top:8px; }
  .nav-menu{ display:none; }
}

六、模板文件结构组织

自适应模板建议这样组织目录：

/templets/mytheme/
  ├── head.htm          公共头部
  ├── footer.htm        公共底部
  ├── index.htm         首页
  ├── list_article.htm  列表页
  ├── article_article.htm 文章页
  ├── style.css         主样式
  └── js/main.js        脚本

CSS 强烈建议外链而非内联，方便浏览器缓存，减少重复下载。内联 CSS 只适合极小站点。

七、字体与间距的响应式

用 rem 或 clamp() 让字号自适应：

body{ font-size:16px; }  /* 移动端 */
@media(min-width:768px){
  body{ font-size:17px; }
}

/* 或用 clamp 一行搞定 */
h1{ font-size:clamp(20px, 4vw, 32px); }
p{ font-size:clamp(14px, 2.5vw, 16px); }

间距用 em 或百分比，避免固定像素在不同屏幕下显得拥挤或稀疏。

八、上线前自检清单

用 Chrome DevTools 的设备模拟器测 iPhone、iPad、主流安卓尺寸
横向滑动测试，确保没有元素溢出导致横向滚动条
触摸目标（按钮、链接）最小 44×44px，符合无障碍标准
禁用 overflow-x:hidden 隐藏溢出，要找到溢出源修复
百度移动友好度测试工具检测通过
首屏 LCP 在 2.5 秒以内（手机 4G 环境）

自适应模板做好后，建议持续用真实流量数据验证效果——重点关注移动端跳出率和平均停留时长。如果某个断点下跳出率异常，多半是布局在该尺寸下出了问题，回到 DevTools 复测对应宽度即可定位。响应式是持续打磨的活，不是一次性交付。