EyouCMS触屏端排版优化：解决移动端错乱问题的实用指南

作为踩过坑的过来人，说句掏心窝子的

我当初用EyouCMS做站的时候，跟很多新手朋友一个德行：觉得PC端装修得漂漂亮亮像五星级大堂就行了，触屏端也就是移动端，随便套个适配就完事，这不就是大堂拉个小窗口卖货吗？能出什么问题？

结果没过半个月看数据，我直接傻了：移动端跳失率快80%，十个进来八个走，转化率连PC端的五分之一都不到。我自己点进去看都笑了：图片大得超出屏幕，得用手划着看；文字挤成一团，跟被人踩过的二维码似的，眯着眼都认不出；点“查看更多”，手指头一按偏，直接跳去了后台登录页，这不逗人玩吗？

那时候才反应过来：EyouCMS触屏端排版优化根本不是什么可有可无的边角活，是直接影响你吃饭的核心活！我前前后后踩了半个月的坑，查了一堆教程，试了好几种办法，今天把干货全掏出来，你就不用像我一样花冤枉钱了。

EyouCMS触屏端排版优化，核心就调这四个地方

1. 图片：别让大胖小子硬挤小门槛

EyouCMS默认模板如果没调好，最容易出问题的就是图片！很多人直接把PC端的原图丢进去，不管移动端屏幕多大，直接原尺寸显示，这不就是让两百斤的大胖小子挤学校宿舍的小门槛吗？不挤得门歪道斜才怪。

做EyouCMS触屏端排版优化，第一步先把最基础的视口加上，不管你是用独立移动模板还是响应式布局，都要在模板的head标签里加上这段代码：

``` ```

然后全局给img加css，我直接把代码给你，抄就行：

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

就这么两行，直接给大胖小子裁成合身的尺寸，什么屏幕都能顺顺当当进去，不会挤出去。哦对了，如果是内容页的文章图片，记得在EyouCMS后台开启内容图片水印的时候，不要开固定尺寸，让它跟着自适应走，这都是我踩过的坑！

2. 文字：别把文字堆成挤在一起的罐头沙丁鱼

说完图片说文字，很多人做EyouCMS触屏端排版优化，直接把PC端的字体行高搬过来，PC端14px字体1.5行高看着舒服，放到移动端你再看看，密密麻麻的字挤在一起，跟罐头里的沙丁鱼似的，连气都喘不过来，谁愿意看？

其实调整超简单，加个媒体查询就能搞定，针对768px以下的屏幕，直接改这几个参数：

• 字体大小改成16px，别用14px，手机屏幕小，字大一点看着不累，符合大众阅读习惯
• 行高改成1.7-1.8，字间距拉开0.5px，段落间距至少留1em，给文字也喘口气
• 千万不要用固定px单位写字体，要用rem或者vw自适应单位，不同尺寸的手机都能完美适配

就这么改完，你再打开触屏端看看，原来糊成一团的字瞬间就舒展开了，跟把沙丁鱼从罐头里倒出来摆到盘子里一样，清清楚楚，看着就舒服。

3. 按钮：别让用户点下单变成点关闭

你说你好不容易把用户留住了，文字图片都舒服了，结果用户要点按钮下单，结果按钮太小，挤在一起，手指头一按，本来要点确认，直接点成了关闭页面，你说憋屈不憋屈？这都是EyouCMS触屏端排版优化没做到位的锅！

按行业标准，触屏端可点击的按钮最小不能小于48px48px，为啥？因为成年人的手指头宽度差不多就是45-50px，你做个30px的按钮，那不就是故意让人选错吗？还有按钮和按钮之间，至少留8px的间距，别贴得像亲兄弟似的分不开。

如果你用的是EyouCMS官方默认模板，直接去模板目录里的公共css文件（一般是common.css）改，搜索按钮相关的类名，直接改宽高和间距就行，十分钟就能改完，我当初改完之后，按钮点错率直接降了八成，亲测有用。

4. 侧边栏/弹窗：别让广告牛皮癣糊用户一脸

最后说个很多人忽略的细节：PC端你加侧边栏放推荐、放分类没问题，放到移动端你直接照搬，那内容直接被挤得只剩三分之一宽，那不就是客人吃饭你往人碗里塞传单吗？谁不烦？

做EyouCMS触屏端排版优化，这里直接加一句媒体查询，屏幕小于768px的时候，把侧边栏display:none隐藏掉，或者直接放到内容的最底部，别占着内容的C位。还有弹窗，别一打开网站就弹个满屏广告，用户刚进来就要先关广告，体验能好吗？改成滑动到一半再弹，或者同一个用户只弹一次行不行？

改完EyouCMS触屏端排版优化，收获比你想的大

我当时抱着死马当活马医的心态，花了一下午把这几个地方改完，过了一周看数据，直接给我整惊喜了：移动端跳失率从78%降到了42%，平均停留时间翻了一倍，过了半个月，关键词排名还涨了好几个，整站流量直接涨了六成，这不比你花大几千买外链香吗？

说句掏心窝子的土话，现在百分之七八十的流量都在移动端，你PC端花十万装修，触屏端乱得像菜市场，那不就是你开个五星级酒店，门口小吃摊摆得乱七八糟，客人根本不想进嘛！

我之前也花过几百块买所谓的EyouCMS触屏端排版优化插件，结果大部分就是加了个基础自适应，这些东西本来自己改改css就能搞定，根本不用花那个冤枉钱。你要是现在也在用EyouCMS，触屏端排版乱七八糟，流量上不去，别拖着，今天抽一下午照着改就行。

最后再跟大家念叨一遍：EyouCMS触屏端排版优化做好了，用户留得住，搜索引擎喜欢，排名涨得快，流量涨得多，赚的钱自然也多，这么划算的事，为啥不早点做呢？种一棵树最好的时间是十年前，改EyouCMS触屏端排版优化最好的时间就是现在！