CSS 的 rem 单位

改变 font-size 来进行自适应

rem 这个属性,通过在 html 元素设置一个初始大小,然后全部单位用 rem 来计算,则页面自适应。

兼容性

现在大部分浏览器 IE9+,Firefox、Chrome、Safari、Opera ,如果我们不修改相关的字体配置,都是默认显示 font-size 是 16px 即:

html {
  font-size: 16px;
}
1
2
3

则设置了 <html> 之后,后面的大小样式会这样写,如

p {
  font-size: 0.75rem; //12÷16=0.75(rem)
}
1
2
3

所以你很容易想到,根据屏幕宽度和高度来动态改变 <html>font-size 的大小,那么页面的大小也随之变化了。

结合 JS 做自适应布局

下面是一段做自适应布局的 JS 脚本

/**
 * 判断用户client width
 * 然后给html设置一个font-size
 * 目的是为了方便rem做自适应布局
 */

;(function(doc, win) {
  var docEl = doc.documentElement,
    //判断是横竖屏
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    func = function() {
      var clientWidth = docEl.clientWidth
      if (!clientWidth) return
      //按照比例缩放
      var docElWidth = 100 * (clientWidth / 320)
      //最大值
      if (docElWidth > 200) docElWidth = 200
      // console.log(docElWidth);
      docEl.style.fontSize = docElWidth + 'px'
    }

  if (!doc.addEventListener) return
  win.addEventListener(resizeEvt, func, false)
  doc.addEventListener('DOMContentLoaded', func, false)
})(document, window)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25