移动端css适配怎么适配 详细用法

移动端CSS适配可以通过使用Viewport、Rem、Flex等方式来实现，以下是详细的用法：

1. Viewport适配

Viewport是移动端适配的基础，通过设置Viewport的宽度来控制页面的显示尺寸。一般来说，我们会将Viewport的宽度设置为设备的宽度，如下所示：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. Rem适配

Rem是一种相对单位，相对于根元素的字体大小进行计算。通过设置根元素的字体大小来实现页面元素的适配。一般来说，我们会将根元素的字体大小设置为屏幕宽度的1/10，如下所示：

html {
  font-size: calc(100vw / 10);
}

然后，在页面中使用Rem单位来设置元素的大小，如下所示：

div {
  width: 5rem;
  height: 3rem;
}

3. Flex适配

Flex是一种弹性布局，可以方便地实现页面布局和元素的适配。一般来说，我们会将页面布局设置为Flex布局，并使用Flex单位来设置元素的大小和间距，如下所示：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  flex: 1;
  margin: 0.5rem;
}

以上是移动端CSS适配的三种常用方式，可以根据实际需求选择合适的方式进行适配。