移动端的流量比例已经超过了70%，百度移动优先索引全面实施后，企业的网页在手机上以及平板电脑上展示的效果已经不是单纯的“用户体验”的问题了，而是直接影响到了搜索引擎爬虫抓取、收录以及排名排序的基础条件
但是实际情况往往是这样的：在电脑上没有问题，在手机上就会出现导航栏挤在一起、banner图被拉伸变形、表单输入框只有一半大小、按钮太小无法点击等情况。这些并不是因为有没有做响应式设计造成的，而是在于是否正确地做了响应式设计。
响应式并不是把页面变小了，而是一整套不同的布局方式
很多公司所讲的“适配”，实际上就是把整个网页按比例缩小了。这样做在手机上的后果就是文字太小看不清楚、点击区域太小点不到、横排的内容被截断。
真正的响应式布局就是用一套HTML在不同的屏幕尺寸下做出不同的排版效果：PC端为三栏，平板端为两栏，手机端则为单栏；图片大小根据需求调整；导航方式随着屏幕宽度而变化。
断点不要直接复制框架里的默认值，要先看看自己有什么样的内容
Bootstrap 所使用的576/768/992/1200等断点为通用参考值，并非适合所有网站，而应该根据内容来设定：逐渐缩小浏览器窗口，直到出现文字换行错乱、卡片挤压或者留白不协调的地方为止，此时的宽度即为该网站所需的断点。
一般采取的是三个档次：大于等于1200像素的桌面版、768到1199像素之间的平板版、小于768像素的手机版。如果要做一个外贸网站或者面向老年用户的网站的话，还应该加一个大于等于1600像素的大屏版本，在宽屏上不会出现长条形的文字。
用弹性网格和相对单位来解决布局问题
固定像素宽度的存在使得响应式布局变得困难重重，栅格系统采用百分比或者fr作为计量单位来分配空间，容器宽度则由max-width进行兜底处理，元素间距使用rem、vw等相对单位来实现不同屏幕尺寸下的无缝衔接。
两种常见的错误是：
- 没有给图片、视频添加max-width:100%，当容器变小时，媒体元素就会超出边界把整个页面挤爆掉。
- 字号固定为px，在手机上标题会压倒正文，层级关系全部被打乱了。可以用clamp()来设置标题的一个“最小值-理想值-最大值”的弹性范围，一行代码就可以实现各种设备上的字体大小自适应了
图片适配是性能瓶颈中最容易被忽视的地方
在多图适配的情况下，图片处理所占据的性能比例最大。手机上看一个宽1920像素的PC横幅广告，浪费了流量、耗时长。
正确的做法是用 srcset+sizes的方式，使浏览器根据屏幕DPR以及视窗宽度来选择合适的图片资源；在格式方面首选WebP，在兼容性问题严重的情况下使用picture标签进行降级处理；对于首屏的大图要进行预加载，其他所有图片都设置loading=lazy属性。
企业站和产品的图片很多，如果这一步做得好的话，在手机上打开的速度一般会比普通网站快1-2秒左右——而加载速度又是百度移动搜索引擎的一个重要评分标准。
导航栏以及触控交互是手机最难对付的部分
在电脑上横向排列的导航栏，在手机上要改变形式，常用的方法就是用汉堡图标加抽屉式的弹出方式，或者是只保留三到四个主要的分类，其他的都放到“更多”里。
触控适配的基本要求有：可以点击的区域要大于等于44×44像素，相邻的可点击元素之间要有8像素以上的距离，hover效果要用:active或者:focus来实现（因为手机上不存在悬停的情况），弹窗的关闭按钮要放到手指可以触及的地方。
另外容易被忽略的一点是：手机端的页面不能进行整体横向滚动，如果出现横向滚动条的话，那大部分是因为某个元素的宽度计算错误造成的，在小屏幕上的话就会造成严重的用户体验问题。
表单、转化路径不能让移动端的用户中途退出
企业的网站的主要目的就是收集客户信息以及获取客户的咨询，手机端的用户体验的好坏直接关系到转化率的高低。
输入框要占满整个容器并且高度不能小于44px，手机号码、电子邮箱等字段要用到相应的键盘模式（type=”tel”或者type=”email”），下拉菜单和日期选择应该使用原生的控件，在小屏幕上自制组件很容易出现错位的情况；提交按钮放在可见区域并且点击之后会给出一个清晰的加载效果。
询盘入口可以放在手机端的底部浮动栏上，有电话、在线聊天和填写表格三个选项一直显示出来，并且要比把入口放到网页最下方好很多
上线之前要做好的各种设备测试清单
完成响应式布局之后不能只用浏览器自带的设备模拟器来测试了，因为模拟器无法模拟出真实的触摸以及真实的网络环境。应该按照下面的清单进行检查：
- 真实设备包括苹果手机（带灵动岛版本）、安卓手机和iPad各一部。
- 横屏和竖屏都要进行检查。
- 弱网环境下首屏加载时间为3秒以内。
- 用百度资源平台中的“移动适配”、“抓取诊断”等工具对页面进行检验，确保移动端显示没有问题。
- 核对移动设备上的TDK和PC端是否相同，防止百度抓取到不完整的移动页面 🔍
响应式布局就是使得一份内容在各个终端上都能得到最合适的展示效果，断点要符合内容特点，单位要有伸缩性，图片要按需加载，交互要考虑手指操作习惯，性能要保证最低标准——只要做好这五点，企业的网站在百度移动端的收录速度以及排名效果就会比单纯堆砌关键词好很多。