织梦cms栏目移动端适配

移动端适配概述

随着移动设备访问量的持续增长，织梦CMS网站的栏目页移动端适配成为必须解决的问题。通过响应式设计、独立的移动模板或动态适配方案，可以让栏目在手机、平板等设备上有良好的展示效果。

一、响应式模板方案（推荐）

在栏目模板中添加响应式CSS，一套模板适配所有设备：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 基础样式 */
.nav-menu{display:flex;gap:15px;}
.article-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}

/* 平板端 */
@media(max-width:1024px){
  .article-list{grid-template-columns:repeat(2,1fr);}
  .nav-menu{flex-wrap:wrap;}
}

/* 手机端 */
@media(max-width:768px){
  .article-list{grid-template-columns:1fr;}
  .nav-menu{flex-direction:column;display:none;}
  .nav-menu.active{display:flex;}
  .mobile-menu-btn{display:block;}
  h1{font-size:22px;}
  .content img{max-width:100%;height:auto;}
}
</style>

二、独立移动模板方案

为栏目创建专门的手机版模板，通过域名判断切换：

<!-- 在栏目页模板中添加判断 -->
{dede:php}
$ua=$_SERVER['HTTP_USER_AGENT'];
$is_mobile=preg_match('/(android|iphone|ipad|mobile)/i', $ua);

if($is_mobile){
    // 使用移动端模板
    $GLOBALS['cfg_df_style']='mobile'; // 切换到手机模板目录
}
{/dede:php}

创建移动模板目录结构和文件：

templets/
├── default/          # PC端模板
│   ├── list_article.htm
│   └── article_article.htm
└── mobile/           # 移动端模板
    ├── list_article.htm
    └── article_article.htm

三、栏目导航的移动端适配

实现移动端常见的汉堡菜单效果：

<!-- 移动端导航 -->
<nav class="channel-nav">
  <div class="menu-toggle" onclick="toggleMenu()">
    <span></span><span></span><span></span>
  </div>
  <ul id="main-menu">
    {dede:channel type='top' row='10'}
    <li><a href="[field:typelink/]">[field:typename/]</a></li>
    {/dede:channel}
  </ul>
</nav>

<script>
function toggleMenu(){
    document.getElementById('main-menu').classList.toggle('show');
}
</script>

四、栏目列表页移动端优化

<!-- 移动端友好的列表布局 -->
{dede:list pagesize='15'}
<div class="article-card">
  <a href="[field:arcurl/]" class="card-img">
    <img src="[field:litpic/]" alt="[field:title/]" loading="lazy">
  </a>
  <div class="card-body">
    <h3><a href="[field:arcurl/]">[field:title/]</a></h3>
    <p class="card-desc">[field:description function='cn_substr(@me,80)'/]</p>
    <div class="card-meta">
      <span>[field:pubdate function="MyDate('Y-m-d',@me)"/]</span>
      <span>[field:click/]次阅读</span>
    </div>
  </div>
</div>
{/dede:list}

五、移动端分页优化

<!-- 移动端友好的分页 -->
<div class="mobile-pagination">
  {dede:pagelist listitem="pre,next" listsize="3"/}
</div>

六、图片适配移动端

<!-- 使用srcset实现响应式图片 -->
<img src="[field:litpic/]" 
     srcset="[field:litpic/]?w=400 400w, 
             [field:litpic/]?w=800 800w"
     sizes="(max-width: 768px) 100vw, 50vw"
     alt="[field:title/]">