在移动端开发中，适配指的是应用界面和功能能够在不同设备、操作系统、屏幕尺寸和分辨率上良好显示和运行的能力。移动端适配需要考虑不同品牌、尺寸、分辨率的设备，尤其是在 iOS 和 Android 平台之间的差异。

 移动端适配的方式

响应式布局是一种常见的适配方式，主要通过 CSS 实现。关键技术包括：

媒体查询（Media Queries）：根据设备的特性（如屏幕宽度、高度、分辨率等）应用不同的 CSS 样式。

相对单位（em、rem、%）：使用相对单位，而不是固定的像素值，以适应不同屏幕的尺寸和分辨率。

Flexbox 和 Grid：这些布局模型可以帮助实现灵活的布局，适应各种屏幕大小。

视口（Viewport）设置

在移动端，控制页面视口的大小和缩放是很重要的。

移动端适配的基本概念

移动端设备种类繁多，主要适配的内容包括：

屏幕尺寸：不同设备的屏幕大小差异，如 5.5 英寸、6.1 英寸等。屏幕分辨率：不同设备的分辨率不同，如高清（HD）、超高清（QHD）、4K。像素密度（DPI/PPI）：不同设备的屏幕像素密度不同，比如 Retina 屏幕和普通屏幕。操作系统：iOS 和 Android 在适配上有许多不同。

触摸事件和行为：操作系统和设备可能支持不同的触摸事件（如长按、滑动等）。

借助media实现rem适配rem：CSS的长度单位， 根元素字体大小的倍数，只有根元素字体大小有关； html 中的根元素即 html 元素。大部分浏览器的默认字体大小都是16px，所以1rem = 16px；rem适配原理，长度单位都是用 rem 设置

当屏幕尺寸改变时，只需要修改 html 元素的 font-size 即可实现等比适配，在制作页面的时候，只考虑跟设计稿相同的屏幕尺寸即可，其他尺寸屏幕自动适配。