新上线基木鱼页面电脑端排版整齐，手机端文字全挤在一起

新上线的基木鱼页面，电脑端编辑器里看着排版整整齐齐，手机端一打开文字全挤在一坨，行与行之间几乎没有空隙，有的地方甚至字和字都粘在一起，这种情况在行业里太常见了，几乎每个做过基木鱼落地页的人都遇到过。

很多人第一反应是去改字号，把手机端的字号调小一点，结果发现根本没用，甚至越调越挤。 还有人会去拉文字模块的高度，把模块拉得很长，结果文字还是挤在一起，只是模块下面多出了一大片空白。

真正的核心问题几乎都出在行高的单位设置上。基木鱼编辑器默认的行高单位是像素（px），很多人在电脑端设置行高的时候，会直接输入一个固定的像素值，比如24px、28px，觉得这样在电脑上看起来刚好。但问题就出在这里，固定像素的行高是死的，不会随着手机端字号的自动缩放而变化。

当页面在手机端渲染的时候，基木鱼会根据不同手机的屏幕尺寸和分辨率，自动对字号进行一定比例的缩放，以保证在不同设备上的可读性。但固定像素的行高不会跟着变，字号变大了，行高还是原来的24px，自然就会出现文字挤在一起、上下行重叠的情况。

更隐蔽的一个问题是，很多人在富文本编辑器里直接编辑文字的时候，会从Word或者其他地方复制粘贴内容过来。 这些复制过来的内容会自带原来的格式，包括固定的行高、字间距、甚至是一些看不见的特殊字符。这些格式的优先级比基木鱼组件的全局样式要高，所以即使你在组件样式里改了行高，也不会生效，文字还是会保持原来的紧凑状态。

还有一种情况是文字模块的宽度设置得太窄。在电脑端编辑器里，文字模块的宽度看起来足够，但手机端的屏幕宽度只有375px左右，再加上左右两边的内边距，实际可用的宽度就更少了。如果文字模块的宽度设置得太窄，或者里面有长单词、长数字、连续的标点符号，浏览器就会强行把这些内容挤在一行，导致字间距被压缩，看起来就像粘在一起一样。

很多人不知道基木鱼有移动端单独编辑的功能。 基木鱼编辑器顶部有一个切换按钮，可以在电脑端、平板端、手机端三个视图之间切换。在手机端视图下，你可以单独调整手机端的样式，包括字号、行高、字间距、模块宽度和位置，这些调整不会影响电脑端和平板端的显示效果。这才是解决移动端排版问题最直接、最有效的方法。

具体的操作步骤其实很简单，先打开基木鱼编辑器，切换到手机端视图。然后找到出现问题的文字模块，点击选中它。先不要急着改行高，第一步一定要先清除格式。双击进入文字编辑模式，全选所有文字，然后点击工具栏上的"清除格式"按钮，就是那个像橡皮擦一样的图标。这一步非常关键，能把所有从外部复制过来的格式全部清除掉，让文字恢复到基木鱼的默认样式。

清除格式之后，再点击文字模块的空白处，退出编辑模式，然后在右侧的样式面板里找到"行高"选项。这里一定要注意，不要输入像素值，要输入无单位的数值。 比如1.5、1.6、1.7这样的数字。无单位的数值表示行高是当前字号的倍数，这样不管字号怎么缩放，行高都会跟着自动调整，永远不会出现挤在一起的情况。

中文正文在移动端的最佳行高是1.6到1.8之间。 字号越小，行高应该越大。比如14px的字号，行高设为1.7比较合适；16px的字号，行高设为1.6就可以了。标题的行高可以稍微小一点，1.2到1.4之间，这样标题看起来更紧凑，不会显得松散。

改完行高之后，再检查一下字间距。基木鱼默认的字间距是0，对于中文来说，这个值是合适的，不需要调整。千万不要把字间距设为负数，哪怕是-0.5px也不行。 中文的每个字都是方块字，本身就有固定的宽度，负的字间距会让字与字之间重叠，看起来非常难看，而且阅读起来很费劲。只有在做一些特殊的设计效果时，才会对标题的字间距进行微调，而且也只能用正数。

然后再调整一下文字模块的宽度。在手机端视图下，把文字模块的左右两边拉到和页面的内边距对齐，不要留太多的空白，也不要超出页面的边界。一般来说，手机端文字模块的宽度应该在320px到340px之间，这样每行大概能显示20到25个汉字，是最适合阅读的长度。 如果模块太宽，每行的字太多，阅读的时候眼睛会很累；如果太窄，换行太频繁，也会影响阅读体验。

还有一个容易被忽略的问题是段落间距。很多人会用空行来分隔段落，这样在手机端看起来段落之间的距离会非常大，显得很松散。正确的做法是在样式面板里找到"段落间距"选项，设置一个合适的数值，比如20px到30px之间。这样段落之间的距离会比较均匀，排版也会更整齐。

如果改完之后还是有问题，一定要先清除缓存再预览。 基木鱼有很强的缓存机制，有时候你明明已经改了样式，但预览的时候还是显示原来的样子。这时候不要以为是自己改得不对，先点击编辑器右上角的"保存"按钮，然后点击"预览"，在预览页面里按Ctrl+F5强制刷新，或者用手机的无痕模式访问，这样就能看到最新的效果了。

还有一种比较特殊的情况，就是使用了两端对齐的对齐方式。 很多人觉得两端对齐看起来更整齐、更美观，但在中文移动端排版里，两端对齐其实是一个大坑。因为中文没有英文那样的单词分隔，浏览器为了让每行的长度一致，会强行拉伸字间距，导致有的行字间距很大，有的行字间距很小，看起来非常不均匀，甚至会出现" rivers of white"的现象，就是页面上出现一条条白色的河流，非常影响阅读体验。

中文移动端排版最好的对齐方式是左对齐。 左对齐符合中文的阅读习惯，字间距也会保持均匀，看起来更舒服。只有在一些特殊的场景，比如表单的标签、数据列表等，才适合使用两端对齐。

很多人会问，为什么基木鱼的预览和实际手机上的显示效果不一样？ 这是因为基木鱼的预览是在电脑浏览器里模拟手机的显示效果，而不同的手机浏览器、不同的操作系统，对CSS的解析方式是有差异的。比如Safari和Chrome对行高的计算方式就略有不同，华为和小米的系统字体也不一样，这些都会导致最终的显示效果有细微的差别。

所以在做完页面之后，一定要用至少两到三部不同品牌的手机进行测试，比如苹果、华为、小米，看看在不同的设备上显示效果是否一致。如果在某一部手机上出现了文字挤在一起的情况，可以适当把行高再调大一点，比如从1.6调到1.65，这样就能兼容大部分设备了。

还有一个小技巧，就是不要在一个文字模块里放太多的内容。 如果一个文字模块里有几百上千字，不仅排版起来很麻烦，而且在手机端加载的时候也会比较慢。最好把长文本分成几个短的文字模块，每个模块之间用图片或者分隔线隔开，这样排版会更灵活，阅读体验也会更好。

很多人不知道基木鱼的全局样式功能。 在基木鱼编辑器的左侧，有一个"全局样式"的选项，在这里可以统一设置整个页面的正文字体、字号、行高、字间距、颜色等样式。这样所有的文字模块都会继承这些全局样式，不需要每个模块都单独设置，不仅节省时间，而且能保证整个页面的排版风格统一。

当然，全局样式的优先级是最低的，如果某个文字模块单独设置了样式，会覆盖全局样式。所以如果发现某个文字模块的样式和全局不一样，先检查一下是不是在模块里单独设置了样式。

最后总结一下，解决基木鱼手机端文字挤在一起的问题，其实就三步： 第一步清除格式，第二步把行高改成无单位的数值，第三步用不同的手机测试并微调。只要掌握了这三步，以后再遇到类似的问题，几分钟就能解决，不用再浪费大量的时间去反复调整。

很多人之所以会在这个问题上浪费很多时间，就是因为不知道行高单位的重要性，一直在用固定像素的行高，结果越调越乱。还有就是没有养成清除格式的习惯，从外部复制过来的内容自带了很多乱七八糟的格式，导致样式冲突。

其实基木鱼的排版逻辑和其他可视化编辑器是一样的，只要掌握了响应式排版的基本原理，用起来还是很方便的。 响应式排版的核心就是用相对单位代替绝对单位，让页面能够根据不同的设备自动调整。行高用无单位的数值，宽度用百分比，字号用rem或者vw，这些都是响应式排版的基本技巧。

当然，基木鱼也有一些不完善的地方，比如有时候会出现一些莫名其妙的bug，比如样式不生效、模块错位等。这时候不要慌，先保存页面，然后刷新编辑器，或者清除一下浏览器缓存，大部分问题都能解决。如果还是不行，可以尝试把出问题的模块删掉，重新添加一个，这样往往能解决一些比较顽固的问题。