现在移动流量占比已经超过了70%，百度移动优先战略全面实施后，企业的网站在手机上以及平板电脑上展现的方式就不仅仅是用户体验的问题了，而是直接影响搜索引擎爬虫抓取、收录和排名排序的基础条件
但是实际上经常会出现的情况是：在电脑上没有问题，在手机上就会出现导航栏挤在一起、banner图被拉伸变形、表单输入框只有一半大小、按钮太小不能点击等问题。这些问题并不是因为没有做响应式设计造成的，而是因为做了错误的响应式设计所导致的。
响应式并不是简单地缩小页面大小，而是采用另外一种不同的方式来布局
所谓的“适配”，就是把整个网页按照一定的比例缩小后所呈现的效果，在手机上就会出现文字太小看不清、按钮太小点不中、横排的内容被截断等毛病。
真正的响应式网页设计是用一套HTML代码就可以达到不同的页面布局的效果：在电脑上看是三个栏目的形式，在平板上看是两个栏目的形式，在手机上看就是一个栏目的形式；图片大小根据需求进行缩放；导航方式也随着屏幕宽度改变而发生改变。
不能随便套用框架里默认的内容，要根据自己实际情况进行挑选
Bootstrap常用的576/768/992/1200这些断点只是通用的参考值，并不适合所有的网页，在实际应用中应该根据实际情况来设定：把浏览器窗口缩小到出现文字换行错乱、卡片被挤在一起或者留白不合适等问题的地方为止，此时对应的宽度即为该网站所需要的断点。
一般有三种选择：大于等于1200像素的桌面版、768到1199像素之间是平板版、小于768像素的是手机版。如果要做一个外贸网站或者给老人使用的网站的话，则还要增加一个大于等于1600像素的大屏版本，在宽屏上就不会出现很长的文字了。
用弹性网格和相对单位来解决这个问题
固定像素宽度给响应式布局造成了很多困难，栅格系统以百分比或fr的方式分割空间，容器的最大宽度用max-width来进行限制，元素之间的间距使用rem、vw等相对单位来确保在不同屏幕尺寸下都能正确地排列好。
常见的两种错误是：
如果不加max-width:100%的限制，那么当容器变小时，媒体元素就会超出容器之外，导致整个页面都被挤压得歪斜了。
图片适配是性能瓶颈中的一个经常被忽视的部分
当图片进行适配时，所消耗的资源最大。在手机上查看一个宽度为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的各个信息的相互一致性才能真正的防止百度等搜索引擎将我们的数据给索引了，造成了不完整的数据的外溢
响应式布局可以使同样的内容以最适合的方式显示在各种设备上，断点要根据具体内容来设定，单位要有一定的伸缩余地，图片要按需加载，交互要考虑手指操作的习惯，性能要达到最基本的要求——做到以上五点之后，在百度移动端的收录速度和排名效果都会比单纯堆砌关键词的效果好很多。