上周帮一个客户看他的网站，手机上打开，图片糊成一片，导航菜单缩成一个按钮，点开之后想返回找不到在哪，表单输入框被键盘挡住了一半。他跟我说：”这个网站不是响应式的吗？不是说自适应吗？”
是的，它是”响应式”的。技术上毫无问题，代码写的是@media query，屏幕宽度小于768像素的时候触发移动端样式。该有的元素都有，只是用起来处处别扭。
这大概是很多企业对响应式建站最大的误解——以为只要手机能打开、能显示内容，就算完成任务了。
响应式的门槛，比你想的高得多
响应式这个词火了快十年，最早是 Ethan Marcotte 2010年提出来的概念，核心理念是”一次设计，适配所有屏幕”。这个理念本身没错，但经过这么多年市场消化，”响应式”这三个字已经被用烂了，变成了一个谁都敢往自己身上贴的标签。
真正的响应式，体验应该是这样的：用户从电脑换到手机，不会感觉到内容被阉割了，不会因为屏幕小就找不到想要的功能，不会因为用的是安卓还是苹果就有截然不同的体验。这三个”不会”，说起来简单，做起来每个都是细节。
标准一：排版自适应不是简单堆叠，要看内容优先级
很多所谓响应式网站的移动端，就是把电脑端的内容原封不动缩放一下，图片缩小一点，文字挤在一起，段落间距变小。结果就是用户在手机上看到的是一堵字，没有主次，没有呼吸感，想找的核心信息淹没在一堆内容里。
好的响应式移动端，逻辑应该是这样的：电脑端展示的是完整信息架构，移动端要重新排列优先级。最重要的放在最显眼的位置，次要的内容要么折叠、要么简化、要么直接去掉。导航从顶部横排变成汉堡菜单，图片从多图横排变成单图轮播，文字段落从多栏变成单栏。
这不是偷工减料，是基于移动端用户使用场景的重新设计。手机屏幕就那么大，用户刷过来的注意力就那么几秒，把最重要的事情说清楚，比塞进去一百个字更有价值。
标准二：图片不只是缩放，要考虑加载和显示双重问题
这是个老生常谈的话题，但真正做好的人不多。
很多网站手机端打开很慢，原因不在代码，在于图片没做处理。同一张图，电脑上显示是1920像素宽，手机上还是加载1920像素的图片，流量多耗了好几倍，加载时间自然上去了。
真正的响应式图片方案，应该是根据屏幕尺寸加载不同分辨率的版本。电脑端用高清图，手机端用适配图，平板用中间档。同样的视觉效果，只加载必要分辨率的内容，既快又省流量。
还有个容易被忽视的点：Retina屏幕的显示效果。iPhone和部分安卓旗舰机用的是Retina屏幕，像素密度是普通屏幕的两倍，如果图片分辨率不够，在这些设备上看起来就会发虚。这个问题在设计阶段就要考虑进去，而不是等上线了才发现。
标准三：交互适配不是点得到就行，要考虑手势和场景
手机上是触屏操作，和电脑鼠标点击完全不同。按钮要够大，手指才能精准点中；链接之间要有足够间距，防止误触；滑动操作要顺滑，不能出现卡顿；弹窗和浮层要考虑键盘弹起后的位置，不能遮挡输入框。
更细节一点：手机端要考虑用户可能是在户外强光下使用，颜色对比度要足够；横屏竖屏切换要平滑，不能出现排版错位；长按、滑动、双击这些手势操作要有对应的功能反馈。这些东西听起来琐碎，但用户遇到一次，体验就打一次折扣。
还有一个常见问题：表单。手机端填表单是最痛苦的事情之一，输入框太小、选择器难用、验证码看不清、键盘弹起来把表单顶没了。这些环节每多一步操作，用户流失率就上一个台阶。好的响应式表单设计，应该简化字段数量、智能识别输入类型（触发数字键盘或字母键盘）、提供自动填充支持、甚至能拍照识别信息。这些不是高深的技术，但需要花时间去打磨。
为什么这些细节很重要
说到底，响应式网站服务的不是建站的人，是用手机访问的潜在客户。
数据不会骗人。百度最新的移动搜索报告显示，移动端流量已经占据总流量的七成以上，这意味着大部分用户是通过手机认识你的网站的。如果这个第一印象是”界面混乱、操作别扭、内容看不清”，用户不会留下来研究你有多专业，直接关掉去下一家。
我们在山东做了这么多年网站，见过太多”看起来做了响应式，实际上没法用”的案例。问题往往不在于技术实现，而在于设计的时候就没有真正从移动端用户的角度思考。代码写对了，页面能自适应，但体验对了没有，是另一回事。
齐鲁建站（QiluSite）在响应式这件事上的标准很简单：不要只保证手机能打开，要保证手机用起来顺畅。图片要做多尺寸适配，交互要考虑触屏场景，内容要按优先级重新组织。这些工作看起来繁琐，但做好了，用户在手机上的停留时长、转化率、整体满意度都会有明显变化。
网站是企业在互联网上的门面，电脑端做得好是基本功，移动端做得好才是现在真正的竞争力。如果你的网站手机端体验还有提升空间，可以先看看问题出在哪，对症下药比推倒重来更高效。
