织梦源码自适应手机效果如何实现？

步骤 2：引入一个响应式CSS框架（强烈推荐）

手动编写所有媒体查询非常耗时且容易出错,直接引入一个成熟的CSS框架（如 Bootstrap 或 Tailwind CSS）是最高效的方法，这里以 Bootstrap 5 为例。

1. 下载 Bootstrap：访问 Bootstrap 官网，下载 "CSS" 和 "JS" 文件（通常包含 bootstrap.min.css 和 bootstrap.bundle.min.js）。

2. 上传文件：将下载的CSS和JS文件上传到你的织梦模板目录下，/templets/default/ 目录里。

3. 修改 head.htm：在刚刚添加的 meta viewport 下面，引入 Bootstrap 的CSS文件。

   <link href="/templets/default/css/bootstrap.min.css" rel="stylesheet">

4. 修改 footer.htm：在页面底部，引入 Bootstrap 的JS文件（注意：jQuery 通常需要先加载，但Bootstrap 5已经不再依赖jQuery，所以可以直接引入）。

   <script src="/templets/default/js/bootstrap.bundle.min.js"></script>

步骤 3：修改CSS文件（使用流式布局和媒体查询）

现在你需要修改你网站的CSS样式,使其能够响应式变化。

1. 找到你的主CSS文件：通常在 /templets/default/style/ 目录下，文件名可能是 dedecms.css 或 main.css。

2. 修改全局容器：找到包裹整个网站内容的主要容器（#main, .container），将它的宽度从固定像素改为百分比或使用Bootstrap的容器类。

   修改前 (可能的样子):

   #main {
       width: 1200px;
       margin: 0 auto;
   }

   修改后 (使用Bootstrap的响应式容器):

   /* 如果你的HTML结构是 <div id="main">...</div> */
   #main {
       width: 100%; /* 宽度改为100% */
       padding: 0 15px; /* 添加内边距，避免内容贴边 */
       box-sizing: border-box; /* 关键！让padding不会增加元素的实际宽度 */
   }

   或者,直接在HTML模板文件中给这个div加上Bootstrap的类，这是最简单的方法：

   <div class="container"> <!-- Bootstrap的container类会自动处理响应式宽度 -->
       <!-- 你的网站内容 -->
   </div>

3. 处理图片和视频：确保图片和视频也能自适应，在CSS中添加以下通用规则：

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

4. 使用媒体查询进行微调：这是实现“手机专属样式”的核心，在你的主CSS文件末尾添加以下代码：

   /* 当屏幕宽度小于等于768px时（平板及以下设备） */
   @media (max-width: 768px) {
       /* 示例：调整网站标题的字体大小 */
       .site-title {
           font-size: 24px;
       }
       /* 示例：隐藏桌面端的导航菜单，显示手机端的汉堡菜单按钮 */
       .desktop-nav {
           display: none;
       }
       .mobile-menu-toggle {
           display: block; /* 假设你有一个手机菜单按钮 */
       }
       /* 示例：调整文章列表的布局 */
       .article-item {
           margin-bottom: 20px;
       }
   }
   /* 当屏幕宽度大于768px时（桌面设备） */
   @media (min-width: 769px) {
       /* 示例：隐藏手机菜单按钮，显示桌面导航 */
       .mobile-menu-toggle {
           display: none;
       }
       .desktop-nav {
           display: block;
       }
   }

步骤 4：修改织梦模板文件（HTML结构）

你需要修改那些生成页面主要结构的模板文件,如 index.htm (首页), article_article.htm (文章页), list_category.htm (列表页) 等。

1. 使用网格系统：利用Bootstrap的网格系统（.row 和 .col-*）来布局内容，这是最简单的方法。

   修改前 (可能的样子):

   <div id="main">
       <div id="left-content">文章内容</div>
       <div id="right-sidebar">侧边栏</div>
   </div>

   修改后 (使用Bootstrap网格):

   <div class="container">
       <div class="row">
           <!-- 左侧内容，在手机上占满12列，在中等屏幕以上占8列 -->
           <div class="col-md-8">
               {dede:field.body/}
           </div>
           <!-- 右侧边栏，在手机上隐藏，在中等屏幕以上占4列 -->
           <div class="col-md-4 d-none d-md-block">
               {dede:include filename="side.htm"/}
           </div>
       </div>
   </div>

   • col-md-8：在屏幕宽度 md (≥768px) 时，该元素占8/12的宽度。
   • col-md-4：在屏幕宽度 md (≥768px) 时，该元素占4/12的宽度。
   • d-none d-md-block：这是一个Bootstrap的响应式工具类，表示默认隐藏（d-none），但在 md 屏幕及以上显示（d-md-block）。

2. 为导航菜单添加响应式功能：你需要一个“汉堡菜单”按钮，并使用JavaScript来控制菜单的显示和隐藏。

   • HTML 结构：

     <nav class="navbar">
         <button class="mobile-menu-toggle">菜单</button>
         <ul class="desktop-nav">
             <li><a href="/">首页</a></li>
             <li><a href="/category/">栏目</a></li>
             <!-- 更多菜单项 -->
         </ul>
     </nav>

   • CSS：

     .mobile-menu-toggle { display: none; } /* 默认隐藏 */
     @media (max-width: 768px) {
         .mobile-menu-toggle { display: block; }
         .desktop-nav { display: none; } /* 默认隐藏桌面菜单 */
         .desktop-nav.active { display: block; } /* 当添加active类时显示 */
     }

   • JavaScript (在 footer.htm 中添加):

     <script>
     document.querySelector('.mobile-menu-toggle').addEventListener('click', function() {
         document.querySelector('.desktop-nav').classList.toggle('active');
     });
     </script>

进阶优化与注意事项

1. 图片优化：

   • 压缩图片：在上传图片到织梦后台前，先用工具（如 TinyPNG）压缩，减小文件体积，提升加载速度。
   • 使用 <picture>：为不同屏幕尺寸提供不同分辨率的图片，进一步节省移动端流量。
   • 织梦自带缩略图：确保你在后台调用文章缩略图时，使用的是经过系统生成的缩略图，而不是原图。

2. 字体优化：

   • 使用相对单位（如 rem, em）来定义字体大小，而不是固定的 px，这样用户可以在手机上通过缩放来调整字体大小。
   • 在CSS中设置 body 的基准字体大小：body { font-size: 16px; }，然后其他元素使用 rem 单位（1rem = 16px）。

3. 测试工具：

   • Chrome DevTools：按 F12 打开开发者工具，点击左上角的手机图标，可以模拟各种手机设备进行调试。
   • 真机测试：最终一定要在真实的手机上测试，检查点击、触摸、滚动等交互是否正常。

4. 考虑“织梦手机站”插件：

   • 如果你不想大改模板,也可以使用织梦官方或第三方开发的“手机站”插件，这种方案通常是独立的一套移动模板，通过检测用户设备自动跳转。
   • 优点：工作量相对小，移动端体验可以做得非常精简。
   • 缺点：维护两套代码，内容同步可能麻烦，且不符合“响应式”的现代标准。