纯CSS实现移动端适配

103 阅读1分钟

原理:基于设置html元素 font-size,其它元素采用rem单位,实现如下:

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

body {
    font-size: 0.28rem;
    margin: 0;
}

// 其它样式

其它方式:

  1. 通过JS计算动态设置html font-size;
  2. 通过媒体查询设置font-size;
  3. 通过transform: scale(x);