同一个网站，访客可能用手机、平板或电脑打开。多终端适配要解决的，不是让页面在小屏上“能打开”，而是让信息顺序和使用方式都说得通。
设备差异带来的实际问题
桌面端一行四列的卡片，在手机上直接缩小会变成难以辨认的小字；桌面端的悬停菜单，在触控设备上根本没有对应的操作。这些问题不是美观问题，是可用性问题。
常见的表现包括：正文需要横向滚动、按钮过小点不准、弹窗遮挡内容、表格在小屏上错位。
响应式布局的基本思路
响应式布局的核心是让版式随可用宽度变化，而不是为每种设备单独做一套页面。实现上主要是三点：
- 按比例布局：用相对单位代替固定像素宽度
- 断点设置：在页面明显开始变形的宽度上设置断点，调整列数与间距
- 内容重排：小屏上把重要信息提前，次要信息折叠或后置
内容优先级需要重排，而不只是缩放
小屏和大屏的信息容量不同。桌面端可以同时呈现的联系方式、产品参数和推荐内容，在手机上如果全部平铺，用户会找不到重点。
更合理的做法是重新排定顺序：首屏保留最核心的一句说明和主要操作入口，其余内容向下延展。折叠不是隐藏，而是让用户按需展开。
容易被忽略的两点
一是触控。手指的可点击范围与鼠标指针不同，按钮和链接需要留出足够的间距与面积。
二是网络条件。移动端常在弱网环境下使用，图片与脚本的体积控制在小屏上更为重要。
怎么检查是否适配到位
除了在实际设备上查看，也可以从几个侧面判断：把浏览器窗口逐渐收窄，看版式在哪个宽度开始混乱；检查主要页面在手机上的首屏是否能看清主题；确认表单在小屏上能否顺利填写完成。适配是否到位，最终以真实设备上的使用是否顺畅为准。