css 在移动设备上面使用响应式字体大小

Posted 2021-05-13

/* 
 * 1. rem 单位是基于根元素（html）计算大小的 
 * 2. 几乎所有的浏览器根元素字体大小都是 16px
 * 3. 将 html 元素的字体大小调整到 10px 方便使用 rem
 * 4. 采用层叠的方法兼容那些不支持 rem 单位的浏览器
 */
html {
  /* 对应值为 font-size: 10px; */
  font-size: 62.5%;
}

body {
  /* 兼容不支持 rem 单位的浏览器 */
  font-size: 12px;
  /* 对应的值为 12px */
  font-size: 1.2rem;
}