昨晚凌晨两点，我盯着电脑屏幕，烟灰缸里堆满了烟头。
客户又催了，说手机打开网站全是乱的，字小得跟蚂蚁似的。
我叹了口气，心里骂了一句娘。
这种活儿，干多了真容易让人怀疑人生。
很多人问我，织梦网站自适应怎么做？
其实真没那么多高大上的理论。
就是跟CSS死磕，跟JS较劲。
先说个真事儿。
上周有个做建材的朋友，非要搞什么全屏视频背景。
结果手机打开，加载半天，视频还卡顿。
用户看两眼就关了。
转化率直接跌了一半。
你看，技术不是越炫越好，是越稳越好。
咱们今天不聊虚的，就聊聊怎么把那些老旧的织梦模板，改成能在手机上正常看的样子。
第一点，也是最基础的，viewport设置。
很多新手改模板，连这个都忘了加。
在header.php里，找到
标签。加上一行代码：
这行代码是灵魂。
没有它，手机浏览器会以为你在用桌面端看网页，然后把页面缩得极小。
加上它，页面才会按照手机屏幕的宽度来渲染。
这一步，能解决80%的初级问题。
第二点，图片自适应。
织梦默认的标签{dede:field name='body'/}，里面往往带着固定宽高的img标签。
比如 width="800" height="600"。
在手机上，这图片直接就把屏幕撑爆了。
你得用CSS去控制它。
给图片加个类名，比如 .post-content img。
然后在style.css里写：
.post-content img {
max-width: 100%;
height: auto;
}
这样，图片再大，也不会超过屏幕宽度。
高度自动缩放，比例不变。
简单，粗暴，有效。
但这里有个坑。
有些模板里的图片是背景图，用background-image写的。
这种不能用上面的方法。
得用background-size: cover;
或者根据屏幕宽度，用媒体查询分别设置背景图的大小。
这就比较麻烦，得一点点调。
第三点，导航栏的处理。
电脑上的横向导航，在手机上肯定放不下。
要么变成下拉菜单，要么变成汉堡菜单。
很多老模板，导航是用ul li写的，浮在左边。
手机上根本点不到。
你得加个JS库，比如jQuery。
写个简单的点击事件，点击汉堡图标，导航栏滑出来。
或者直接用现成的插件，比如Bootstrap的导航组件。
虽然织梦原生不支持Bootstrap，但你可以把它的CSS和JS文件下载下来，引用到模板里。
这不算作弊，这叫站在巨人的肩膀上。
我有个客户，之前用的模板，导航栏在手机上要横着滑动才能看完。
用户体验极差。
后来我帮他改成了下拉式，点击展开。
第二天回访，他说咨询量多了不少。
因为用户找信息方便了。
你看，细节决定成败。
最后，也是最容易被忽视的，字体大小。
电脑上看14px的字，在手机上可能太小了。
建议正文至少16px。
行间距1.6倍。
这样看着不累。
很多模板为了省空间，把行距设得很小。
在手机上一屏能显示很多字，但看着头疼。
用户留存率自然就低。
所以，织梦网站自适应怎么做？
其实就是把那些硬编码的像素值，改成相对单位。
把固定布局，改成弹性布局。
把复杂的JS交互，简化成用户习惯的操作。
别总想着搞什么花里胡哨的效果。
用户打开网站，三秒钟内找不到他要的东西，他就会关掉。
就这么简单。
我也不是专家，就是个修修补补的码农。
但我知道，好的网站，是让人感觉不到技术的存在。
它就像空气一样，自然、舒适。
如果你也在为自适应发愁，不妨试试这几招。
不用改底层代码，只改CSS和少量JS。
哪怕你是小白，也能搞定。
记住，别追求完美，先追求可用。
再追求好用。
慢慢来，比较快。
本文关键词：织梦网站自适应怎么做
