DedeCMS模板自适应修改实操，踩坑经验大放送

开篇闲聊：老古董也得跟上潮流

兄弟们，咱今天不整那些虚头巴脑的理论，直接来点硬菜。说到DedeCMS模板自适应修改，估计很多刚入行的朋友脑袋都要炸了。这就好比你家里那台骑了十年的二八大杠，突然让你给它改装成能参加F1赛车比赛的电动超跑，听着是不是就头大？但没办法啊，现在手机端流量那是真金白银，谁放着钱不赚啊？

我当年刚折腾这玩意儿的时候，也是两眼一抹黑，对着电脑屏幕那是“由于生活所迫，不得不在这个年纪出来卖艺”。但是，经过无数个日夜的“掉坑-爬坑-再掉坑”循环，我终于摸出了一点门道。今天我就以一个“过来人”的身份，把这套DedeCMS模板自适应修改的独门秘籍传授给你们。别担心，这玩意儿看着吓人，其实只要你耐得住性子，就像给女朋友挑口红一样，多试几次总能找到对的色号。

第一步：别急着动刀，先把“后悔药”备好

在开始任何DedeCMS模板自适应修改之前，我要大声疾呼：一定要备份！一定要备份！一定要备份！重要的事情说三遍。这就像你出门前要检查裤链拉好没一样重要。很多新手上来就是一顿操作猛如虎，一看代码二百五，结果把整个站都搞崩了，那时候你哭都没地方哭去。

把你现在的模板文件夹，通常是`/templets/default`这个目录，完完整整地拷贝一份，重命名为`default_bak`。这样，万一你在DedeCMS模板自适应修改的过程中手滑删错了哪个花括号，或者把CSS写成了“乱码”，你还能淡定地把文件拖回来，深藏功与名。记住，备份不是怂，那是资深老鸟的生存智慧。

第二步：给老伙计戴上“透视镜”——Viewport的设置

搞定了备份，咱们正式进入正题。DedeCMS这老系统，默认生成的HTML代码里，很多都是以前PC时代的产物。要让它在手机上也能“如鱼得水”，第一步就是得告诉浏览器：“嘿，别瞎折腾，按手机的比例来显示！”

这就需要我们在模板的头部文件里，通常是`head.htm`或者`header.htm`，找到``标签，在里面加上这行“魔法代码”：

```html ```

这行代码是啥意思呢？简单说，就是把网页的宽度强制设成等于手机屏幕的宽度。没有这行代码，你在手机上看你的网站，就像是用显微镜看报纸，字儿小得跟蚂蚁似的，用户看着眼睛都要瞎了，谁还敢在你的站上多待一秒？所以，DedeCMS模板自适应修改的第一枪，必须得打响Viewport这一仗。

第三步：CSS媒体查询——变身变形金刚

接下来就是DedeCMS模板自适应修改的核心戏码了——CSS媒体查询（Media Queries）。这玩意儿简直就是网页界的变形金刚，它能检测你的屏幕是宽是窄，然后自动换衣服。

以前咱们写CSS，喜欢把宽度定死，比如`.main { width: 960px; }`。这在PC上看着挺美，但到了手机上，那画面太美我不敢看，直接撑破屏幕，横向滚动条能滚到天荒地老。这时候，咱们就得用媒体查询来“大变活人”。

在CSS文件的最底部，咱们加上这么一段：

```css @media screen and (max-width: 768px) { / 这里写手机端专用的样式 / .main { width: 100%; padding: 10px; } .sidebar { display: none; } / 手机上太窄，侧边栏直接隐藏，眼不见心不烦 / } ```

看到没？这就是DedeCMS模板自适应修改的精髓。当屏幕宽度小于768像素的时候（也就是手机和平板竖屏的时候），`.main`这个盒子的宽度就变成了100%，自适应屏幕，还留了点内边距透气。而那个碍事的侧边栏，直接一个`display: none`让它原地消失。这种“该大则大，该小则小，该没则没”的哲学，才是咱们做站的高深境界。

第四步：图片也要学会“减肥”

在DedeCMS模板自适应修改的过程中，图片是个大坑。很多老站的图片都是直接写死宽高的，比如`width="800"`。这在手机上简直就是灾难，图片会撑破容器，把版面搞得乱七八糟。

解决办法很简单，就是给所有的图片加个“紧箍咒”。在CSS里加上这段：

```css img { max-width: 100%; height: auto; } ```

这行代码的意思是：图片最大宽度不能超过它的容器，高度自动按比例缩放。这样，不管你原图是800像素宽还是8000像素宽，在手机上它都会乖乖地缩成屏幕那么宽，绝对不会越狱。这就像让相扑选手去挤电梯，他再胖也得缩着，不然门都关不上。这一步做好了，你的DedeCMS模板自适应修改工作就完成了一半。

第五步：搞定那些“顽固派”——列表和导航

DedeCMS默认的模板里，很多列表页是用`table`布局的，或者用`float`浮动的。这些老古董在手机上特别容易“翻车”。比如横向排列的新闻列表，在手机上应该变成竖着排，不然一行就显示两个字，看着多憋屈。

这时候，咱们就得用CSS去覆盖这些样式。比如找到列表的样式类，通常叫`.list li`或者类似的，在媒体查询里改成：

```css .list li { float: none; width: 100%; margin-bottom: 10px; } ```

还有导航栏，PC上是一排横着的菜单，手机上哪放得下啊？这时候就得把它改成“汉堡菜单”或者干脆变成一个竖向的下拉列表。虽然写JS有点麻烦，但为了用户体验，这点苦值得吃。如果你JS写得溜，可以整个点击展开的效果；如果懒，直接让它竖着排，虽然丑点，但至少能用啊。毕竟，DedeCMS模板自适应修改的目的是为了好用，又不是去参加选美大赛，实用才是硬道理。

第六步：千万别忘了DedeCMS的标签

咱们在改HTML结构的时候，千万小心别把DedeCMS的模板标签给弄丢了。比如`{dede:arclist}`、`{dede:field.title/}`这些，那可是DedeCMS的命根子，没了它们，你的网站就是个空壳子，啥内容都调不出来。

我见过有人在改