响应式网页

响应式网页是怎么根据屏幕大小变化的？

响应式网站会预先定好“屏幕宽度窄于多少时就这样排版”的规则，再根据顾客的屏幕宽度选用合适的规则来显示。这些规则切换的宽度叫作“断点”（breakpoint）。

比如在电脑上三张照片排成一行，到了手机上就变成一张一张上下堆叠。照片和文字框不是固定尺寸，而是按屏幕比例伸缩。

网站代码最上方会有一行“请按设备宽度显示这个页面”的设置（视口设置）。少了这一行，手机上看到的就是被缩小的电脑版页面。

断点以屏幕宽度为准，而不是以具体机型来定。所以不用每出一款新手机就单独适配，即使遇到没见过的屏幕尺寸，也会按最接近的规则自然排版。

响应式、自适应和手机专用网站有什么区别？

响应式是一个网站自动适配所有屏幕；自适应和手机专用网站则是按屏幕分别做好不同版本来显示。Google因为响应式更容易制作和管理，所以推荐响应式。

Google以手机版内容为准来读取网站并进行排名。如果单独做的手机网站内容较少，只在电脑版上才有的内容在搜索中就可能吃亏。

如果您已经在用m.店铺地址.kr这样的手机专用网站，新做网站时请合并成响应式，并把旧的m.网址自动跳转到新网址。这样通过以前流传的链接进来的顾客也不会迷路。

手机端网页要做哪些调整？

手机端不是把页面缩小，而是要重新排版，让人用一个大拇指就能轻松操作。设计时要假设顾客是站着、单手、在很短时间内寻找电话 · 位置 · 价格。

比如美发店的价目表，在电脑上可以用宽表格展示，但在手机上要按项目拆成卡片，顾客才不用左右滑动就能看清。手作工坊的课程安排在手机上也是日期列表比日历更好看。

手机页面还要重新安排内容顺序。电脑上并排的“店铺介绍”和“预约按钮”，在手机上会变成上下堆叠，这时要把顾客最先找的信息放在上面。

如果是咖啡店或餐厅，营业时间、今天是否休息、导航按钮要放在手机首屏附近。因为在店铺附近掏出手机的顾客，最先找的就是这三样。

• 正文字号要大到不放大也能看清
• 按钮和链接的尺寸与间距要足够用手指点按（通常建议长宽在48像素左右）
• 电话号码一点就能直接拨打，地址一点就能打开地图App
• 不要用大弹窗挡住首屏
• 不要把文字做进图片里，文字就用文字（在手机上会变小看不清）
• 照片压缩到适合手机屏幕的尺寸，让它加载更快

现有网站能改成响应式吗？

可以改，但很多老网站与其修改，不如重新做。按电脑屏幕宽度把栏位尺寸写死的网站，要从排版骨架开始重做，修改范围几乎等于重新制作。

先确认一下您的网站现在是什么状态。如果用手机打开时字小得要用手指放大才能看清，很可能不是响应式。如果只有部分页面会左右溢出，有时只改那一部分就够了。

如果决定重做，最好趁这个机会以手机页面为准重新整理内容。比如把老餐厅网站上的菜单图片换成文字菜单，在手机上更好读，搜索引擎也能抓到菜名。

响应式网站怎么检查？

最可靠的方法是用好几部真实手机打开，照着顾客的操作走一遍。比起页面好不好看，先看打电话 · 预约 · 导航能不能顺畅完成。

发现异常时，请截图，并写明用的是什么设备、什么浏览器，一起发给服务商。同一个问题在不同设备上可能显示得不一样，有了这些信息，修复时间会大大缩短。

1. 01用您自己的手机从首屏一直滑到底，看看有没有左右溢出的地方。
2. 02把手机横过来再看一遍。
3. 03换其他类型的手机（iPhone · Galaxy）和平板也打开看看。
4. 04在电脑上慢慢缩小浏览器窗口宽度，看排版是否自然变化。
5. 05亲手点一下拨打电话 · 打开地图 · 预约按钮。
6. 06关掉Wi-Fi，用手机流量打开，看照片会不会加载太慢。

委托制作响应式网站时容易漏掉什么？

最常见的错误是只看电脑版设计稿就定稿。如果大部分顾客用手机浏览，先拿到手机版设计稿并提出反馈意见，会更接近实际效果。

另外，很多人会把菜单或活动通知做成一整张大图放上去。在手机上字会变小很难读，搜索引擎也不太能读懂图片里的文字。

字号、按钮位置这类只在手机上出现的问题，往往上线后先被顾客发现。请要求在上线前的检查阶段，留出时间让您和员工用几部手机亲自走完预约流程。

• 会单独提供手机版设计稿吗？
• 价目表 · 表格 · 日程在手机上会怎么变化？
• 照片会按屏幕尺寸压缩后再上传吗？
• 上线前会用哪些设备检查？