做响应式页面时，常见做法是把桌面布局在小屏幕上堆成一列，看起来"适配了"，用起来却处处别扭：字太小看不清、按钮太挤点不准、横向内容被压扁。响应式的质量取决于三个具体细节。
一、断点按内容定，不按设备定
常见的做法是按设备型号设置断点，但设备尺寸变化很快，按设备定断点会不断失效。更稳的思路是：把浏览器窗口逐渐缩窄，观察内容在哪个宽度开始变得别扭，那里就是断点。
同时要检查中间尺寸。很多页面在大屏和手机上都正常，但在平板尺寸下布局崩坏——因为开发者只测了两端。测试时至少要覆盖窄、中、宽三档。
二、字号要考虑观看距离
手机是近距离手持，桌面是远距离观看，因此移动端的字号不能简单等于桌面端缩小。移动端正文字号若小于可舒适阅读的范围，用户就必须放大页面，体验立刻变差。
行高同样重要。屏幕越窄，每一行能容纳的字数越少，若行高过小，阅读会显得拥挤。移动端可以适当放大行高，让段落之间有呼吸感。
还要注意按钮与标题的相对大小：移动端的标题层级不要做得太过夸张，否则一屏只能显示一句话，用户需要长时间滑动才能获得信息。
三、触控区域要够大
手指的点击精度远低于鼠标。可点击的元素如果做得太小或挨得太近，用户就会频繁点错。基本要求包括：链接与按钮有足够的点击面积与间距；避免在同一行放置多个相邻的小按钮；表单输入框有足够高度。
还有一个常见问题：移动端下拉菜单里的二级项太窄，容易误触到相邻项。适当增加行高与留白，效果立竿见影。
四、内容是移动端优先的
小屏幕上空间有限，不重要的内容会被挤到很远的位置。因此移动端在设计上应当遵循优先级原则：最重要的信息与操作放在最容易到达的位置，次要内容折叠或后置。
具体检查项包括：关键信息是否在前一两屏内出现；主要操作按钮是否不需要滚动就能看到或容易找到；长表格与宽图片在小屏上是否有合理的处理方式（横向滚动、卡片化或精简）。
怎么测试才算到位
不要只在开发者工具的模拟模式下看。至少要在真机上试一遍：用手机实际打开、实际操作表单、实际点击导航，感受有没有需要放大、需要精准点击的地方。真机体验与模拟器往往有差距，手感和字体渲染都会不同。
响应式的目标不是"看起来适配"，而是"用起来顺手"。