flexible.js 源码

三葉Leaves Author
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
(function flexible (window, document) {

  var docEl = document.documentElement

  var dpr = window.devicePixelRatio || 1



  // adjust body font size

  function setBodyFontSize () {

    if (document.body) {

      document.body.style.fontSize = (12 * dpr) + 'px'

    }

    else {

      document.addEventListener('DOMContentLoaded', setBodyFontSize)

    }

  }

  setBodyFontSize();



  // set 1rem = viewWidth / 10

  function setRemUnit () {

    var rem = docEl.clientWidth / 10

    docEl.style.fontSize = rem + 'px'

  }



  setRemUnit()



  // reset rem unit on page resize

  window.addEventListener('resize', setRemUnit)

  window.addEventListener('pageshow', function (e) {

    if (e.persisted) {

      setRemUnit()

    }

  })



  // detect 0.5px supports

  if (dpr >= 2) {

    var fakeBody = document.createElement('body')

    var testElement = document.createElement('div')

    testElement.style.border = '.5px solid transparent'

    fakeBody.appendChild(testElement)

    docEl.appendChild(fakeBody)

    if (testElement.offsetHeight === 1) {

      docEl.classList.add('hairlines')

    }

    docEl.removeChild(fakeBody)

  }

}(window, document))
  • 标题: flexible.js 源码
  • 作者: 三葉Leaves
  • 创建于 : 2025-05-16 00:00:00
  • 更新于 : 2025-05-26 02:57:24
  • 链接: https://blog.oksanye.com/e1f0df878f08/
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
评论
目录
flexible.js 源码