移动端REM适配的基本实现

  REM是移动端屏幕适配的常见方案,可以选用淘宝开源的 flexible,只是用起来稍微有一点麻烦,我一般采用更加简洁的方案,动态去计算html跟标签的font-size,监听屏幕的尺寸变化及时响应,兼顾用户修改系统字体时的处理等其它细节。
  采用 VW方案去适配也是一个好办法,只是兼容性不太好,需要根据具体场景去选择。

开始使用

  1. 压缩后,放置到 head 标签的尾部,直接 script 标签嵌入,保证最先执行,避免用户感知到页面跳动;
  2. 建议加如下代码,将默认字体大小重置为16px,避免在js未执行时,样式、字体混乱:

    html,
    body {
      font-size: 16px;
    }
  3. 字体需不需要使用 rem 单位?看产品、设计师的定位吧,通常建议不要对字体使用 rem 单位(牵扯到布局还是应该采用rem单位),尤其是大段的文章;

代码

你可能感兴趣的:(rem响应式)