首先是viewport设置，在HTML头部设置meta viewport标签，设置width=device-width和initial-scale=1，让页面宽度等于设备宽度。
然后是媒体查询，使用CSS的@media规则，针对不同屏幕尺寸设置不同的样式。比如设置断点，在小屏幕、中等屏幕、大屏幕上显示不同的布局。
rem适配方案，设置根元素字体大小，其他元素使用rem单位。通过JavaScript动态计算根元素字体大小，实现不同屏幕的适配。
vw/vh适配方案，使用视口单位，1vw等于视口宽度的1%。这种方式更直观，但兼容性相对较差。
flexible方案，这是淘宝开源的移动端适配方案，结合rem和viewport，通过JavaScript动态设置根元素字体大小。
还有响应式图片，使用srcset和sizes属性，让浏览器根据屏幕尺寸选择合适的图片。
在实际项目中，我们通常结合多种方案，比如使用rem做基础适配，配合媒体查询处理特殊情况，使用flexible方案处理1px边框问题。
现在也有CSS Grid和Flexbox等现代布局方案，让移动端适配更加灵活和高效。