自适应布局是网页内容根据设备的不同而进行适应；（图1） 通过检测视口分辨率，来判断当前访问的设备是pc端、平板还是手机，从而请求服务层，返回不同的页面； 需要根据不同使用场景开发多套界面。
使用媒体查询给不同尺寸和介质的设备切换不同的样式，在同一个设备下实际还是固定的布局。
响应式布局是网页的布局针对屏幕大小的尺寸而进行响应；（图2） 通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容； 只需要开发一套界面即可适用于所有尺寸及终端。
01 精简并优化导航体系
以Ant Design为例，主导航收起，因为页面中的副导航内容丰富且包含多级子类目，故将其设置为悬浮按钮，以抽屉样式展开。
02 移除不必要的特效
PC端的悬停动效、视差滚动等特效在移动端可直接移除。
03 合理的字体排版
字体大小、行距需根据移动端阅读感受调整至舒适的版式，确定合理的PC-移动端样式映射关系。
04 控件排布关系可进行调整
PC端横向排布的控件，可以在移动端横向排布，但需要注意层级关系保持一致。
05 优化按钮或可点击元素的位置及热区大小