css适用移动端的两个常用技巧

1.使用响应式布局：使用CSS媒体查询（@media）来根据不同的屏幕大小应用不同的样式。

示例：

@media only screen and (max-width: 600px) {
  /* 在宽度小于600px的设备上应用这些样式 */
  body {
    font-size: 14px;
  }
}

@media only screen and (min-width: 601px) and (max-width: 1200px) {
  /* 在宽度介于601px和1200px之间的设备上应用这些样式 */
  body {
    font-size: 16px;
  }
}

@media only screen and (min-width: 1201px) {
  /* 在宽度大于1200px的设备上应用这些样式 */
  body {
    font-size: 18px;
  }
}

 

2.使用弹性布局（Flexbox）：使用flexbox可以轻松地创建自适应的布局 

示例：

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

.item {
  flex: 1 1 200px;
  /* 设置项目的基础尺寸为200px，且在空间不足时不缩放 */
  margin: 10px;
}