把手机版打磨到位

Naratake 用的是继承：Desktop 是底、Tablet 在上面加覆盖，Mobile 先继承前两层，再加自己的覆盖。

1. 在 Desktop 把基础布局、字体排版、间距和视觉顺序定下来。
2. 切到 Tablet，只改那些已经挤不下的属性。
3. 切到 Mobile，只加最少、最必要的手机专属覆盖。
4. 需要时就用帮助里列的快捷键：⌘1 是 Desktop、⌘2 是 Tablet、⌘3 是 Mobile。

手机版会坏，多半是因为横排、固定宽度或内容顺序塞不下。把字统统调小只是把症状盖掉，还会让人更难读。

1. 先选中区段容器，看“样式 → 布局”，再去动里面的子元素。
2. 在小断点把挤成一团的横排改成竖排、减少列数，或允许自动换行。
3. 把超出画布的固定宽度去掉，外边距和内边距要一起看。
4. 主要动作要放在手机阅读顺序的靠前位置。

结构放得下之后，再来调那些决定读着舒不舒服、层次清不清楚的细节。

1. 正文要保持好读的大小；与其硬把字缩到不正常的小，不如把句子改短。
2. 标题太大就往下调，直到换行看起来是刻意的。如果网站是双语，翻译过的内容要再检查一遍。
3. 区段之间的垂直间距要一致，可点击的地方周围也要留够空间。
4. 检查图片的裁剪和主体位置。电脑版的宽幅裁剪放到窄画面，可能刚好把主角切掉。

编辑器画布是用来搭东西的。预览才是同时验证客户体验和响应式操作的地方。

1. 点“预览”，切到店面，选 Mobile。
2. 把导航栏开开关关、换页、每个主要行动按钮都点进去，并用测试数据提交表单。
3. 开了在线订购的话，加一件商品、改数量或选项，一路走到预期的结算或模拟付款画面。
4. 开了订座或预约的话，可订、不可订、输入有误和确认完成这几种状态都要测。

老板在营业中很可能就拿手机看订单、订座或预约。预览的后台同样可以套同一个设备框。

1. 在预览里从店面切到后台。
2. 保持在 Mobile，把这个项目开启的经营页面一个个打开。
3. 在这个窄宽度下检查导航、表格或看板、浮层、表单，以及新订单提醒。
4. 回到 Desktop，确认刚才修手机版时没有多加出新的基础样式。

预览稳定又快，但真实浏览器还多了会伸缩的地址栏、触摸操作、字体渲染，以及各家设备的安全区域。

1. 有审查或预览网址时，公开上线前至少在一部真手机上打开看看。
2. 测点击区域、屏幕键盘、吸顶吸底控件、表单，还有跳转付款的那一段。
3. 每个要修的问题，都记下页面、设备、浏览器和确切现象，别只写“手机版坏了”。