LECMS响应式模板怎么实现

学完这篇你可以在 LECMS 2.4.0 上把默认模板改成一套手机、平板、PC 自动适配的响应式模板，并避开模板缓存、标签写错、移动端溢出这几个常见坑。

第一步：复制默认模板，得到可改的模板目录

先登录后台 http://你的域名/admin.php，左侧菜单进入「界面」→「模板管理」→「模板风格」。找到 default 默认模板，点右侧「复制」，新模板名称填 responsive，目录名也填 responsive。保存后，用服务器文件管理器进入 /template/responsive/，确认里面有 index.html、list.html、show.html、header.html、footer.html、css/、js/、images/。如果没有，点「界面」→「模板管理」→「模板文件」查看实际文件名。

注意：不要直接改 default，LECMS 升级时可能覆盖；复制后要先在「模板风格」里把 responsive 设为默认，再改代码。

第二步：改公共头部 viewport，让手机按设备宽度渲染

编辑 /template/responsive/header.html，在 <head> 里加一行：

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

然后确认 CSS 和 JS 引用路径仍指向当前模板，例如：

<link rel="stylesheet" href="{TEMPLATE_PATH}css/style.css">
<script src="{TEMPLATE_PATH}js/common.js"></script>

如果你的 LECMS 默认模板用的是 __TEMPLATE__ 或 /template/responsive/，保持默认写法，不要混用。

注意：viewport 必须放在 <head> 内、CSS 之前；漏掉它，手机浏览器会按 980px 缩放，页面会显得很小。

第三步：写移动优先 CSS，设置三个断点

打开 /template/responsive/css/style.css，先写全局基础样式：

*{box-sizing:border-box}
img{max-width:100%;height:auto;display:block}
body{margin:0;font-size:16px;line-height:1.6}
.container{width:100%;padding:0 12px;margin:0 auto}

再加媒体查询，断点用 768px、992px、1200px：

@media (min-width:768px){
  .container{width:750px}
  .main{display:flex;gap:20px}
  .left{flex:1}
  .right{width:280px}
}
@media (min-width:992px){.container{width:970px}}
@media (min-width:1200px){.container{width:1170px}}

这样手机默认单列，平板和 PC 自动变双列。若后台「系统」→「系统设置」→「移动设置」里有“启用独立移动模板”，先关掉，避免两套模板互相冲突。

注意：不要只写 max-width:768px 断点，容易越写越乱；推荐先写手机样式，再用 min-width 往上加。

第四步：改模板标签，套上响应式结构

编辑 index.html，把原来的 table 布局删掉，换成 container、main、left、right 结构。列表循环按默认模板标签来，例如：

<div class="container">
  <div class="main">
    <div class="left">
      {loop $list $vo}
      <article class="card">
        <a href="{$vo.url}"><img src="{$vo.thumb}" alt="{$vo.title}"></a>
        <h3><a href="{$vo.url}">{$vo.title}</a></h3>
        <p>{$vo.description}</p>
      </article>
      {/loop}
    </div>
    <aside class="right">侧栏内容</aside>
  </div>
</div>

list.html 和 show.html 也把主内容区加 left，侧栏加 right。改完进后台「工具」→「更新缓存」→「更新模板缓存」。

注意：LECMS 标签大小写和变量名敏感，$vo、$v、$list 不能随意换；以你默认模板里已有的标签为准。

第五步：处理移动端导航、图片和表格溢出

在 header.html 里加菜单按钮：

<button class="menu-toggle" onclick="document.querySelector('.nav').classList.toggle('open')">菜单</button>
<nav class="nav">导航链接</nav>

CSS 补上：

.menu-toggle{display:block}
.nav{display:none}
.nav.open{display:block}
@media(min-width:768px){
  .menu-toggle{display:none}
  .nav{display:flex}
}

图片已有 img{max-width:100%}。内容页表格外层加 <div class="table-wrap">，CSS 写 .table-wrap{overflow-x:auto}。视频 iframe 加 iframe{max-width:100%}。

注意：LECMS 编辑器生成的 iframe 视频可能带固定宽高，不加 CSS 会撑破手机页面。

第六步：绑定新模板并手机实测

回到后台「界面」→「模板管理」→「模板风格」，把 responsive 设为默认。再进「系统」→「系统设置」→「基本设置」，确认模板目录是 responsive。然后用手机浏览器访问首页，依次测 375px、768px、1200px 三个宽度。最后进「工具」→「更新缓存」，勾选“更新模板缓存”并提交。

注意：如果样式没变，先清浏览器缓存；如果开了 CDN，要在 CDN 后台刷新 /template/responsive/css/style.css。

小结

LECMS 响应式模板的核心是：复制默认模板后改 header.html 的 viewport，用移动优先 CSS 写 768px、992px、1200px 断点，把 index.html、list.html、show.html 套进 container/main/left/right 结构，再处理导航、图片、表格和 iframe 溢出，最后在后台切换模板并更新缓存。改标签时以默认模板为准，不要直接改 default，也不要忘记手机真机测试。