phpcms如何修改成手机pc自适应

2025-10-27 03:06:52

1、该经验主要是针对各位站长，自己懂一定的代码，然后自己养的站。程龙博自己是一个做SEO的，也研究过很多的开源代码，而今天要给大家分享的就是我自己的站，使用phpcms做的，这过程中遇到很多问题都是自己在百度上查的，也有在群里问的，但是效果并没有那么好，最后决定自己来改。

2、（决定要改成自适应站的第一点原因）首先说一下我自己的站，程龙博自己的站是一个本地的门户网站，主要更新一些当地的信息，然后phpcms的wap站确实能实现同数据库的功能，但是自身带的模板样式确实很丑，再加上其体验度很是老旧，当客户访问的时候会让其感觉看内容很难受，体验度会很差。

3、（决定要改成自适应站的第二点原因）新闻门户网站注重访客体验度，更注重访客的互动，所以这个评论当然不能少，然而phpcms的wap有评论功能，但是你有没有发现真的很丑，并且没有验证码限制，更改起来更是然人找不到头绪（可能是我技术不到家），所以下定决心要改。

1、heade.html的位置在根目录：phpcms/templates/default/content/heade.html

添加两串代码：

注意：这两串代码非常重要，其决定了最终效果能不能实现，添加的位置在图片中可以看到

phpcms如何修改成手机pc自适应

2、在heade.html中添加自适应手机页面的导航，这个导航在pc页面是不显示的。

<ul>

<dl>

<dd><a href="http://www.0319hot.com/xinxigang/">邢台信息港</a><em></em></dd>

</dl>

</li>

</ul>

</div>

（添加的位置在图片有显示，我是添加在pc导航的下方）

phpcms如何修改成手机pc自适应

3、因为手机或平板屏幕相对pc来说比较小，所以导航的长度也会变小，这种时候就需要把不能显示出来的栏目进行折叠（图中的效果），这个在第二步的时候架构已经写好（你直接复制粘贴就行），而这一步要实现的就是那个折叠的效果，需要在header.html内部最下方加上一串js：

$(".more").click(function(){

$(this).siblings("dl").slideToggle();

})

</script>

phpcms如何修改成手机pc自适应

4、这一步是提醒：上述更改的内容、位置都给大家说明白了，想要省事可以直接复制粘贴，防止因为名字乱改没有效果（一定要注意）

1、mob2.css是来控制自适应站样式的，里面的内容影响自适应以后的效果，这个文件在经验最后可以下载，下载以后要放到根目录的位置是：statics/css/mob2.css（注意：位置不能放错）

phpcms如何修改成手机pc自适应

2、需要更改的内容是：

每一块div的宽度，也就是width要改成100%，效果如图中所示。

作用是让每个div根据屏幕的宽度100%自动缩放，并且不会变形

phpcms如何修改成手机pc自适应

3、这一步是交给大家如何隐藏pc端的模块不在手机端显示，比如隐藏掉pc端的导航（原因：在上面header修改的内容中已经说明），这个就是涉及到css中display的用法，而隐藏pc导航的代码就是：.nav-bar{display: none;}

注意：想要隐藏别的div的话方法跟这个一样

phpcms如何修改成手机pc自适应

4、手机端导航的样式也在这个css里面写着，程龙博已经写好，大家只要把下载的mob2.css样式放到根目录的位置指定的位置就能显示，（样子如图所示，你也可以自己修改）

phpcms如何修改成手机pc自适应

1、最后大家会发现一个问题，那就是在pc端看到了手机端的导航，如何把在手机端显示的导航在pc端隐藏掉呢？

phpcms如何修改成手机pc自适应

2、只要在phpcms自带的样式default_blue.css加一串代码就能搞定了：

.mob-nav{ display:none;}

phpcms如何修改成手机pc自适应

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。