flexible.js 1.1 KB

123456789101112131415161718192021222324252627282930313233
  1. ;(function (win, doc) {
  2. 'use strict'
  3. // 设计稿宽度
  4. var designWidth = 375
  5. // 屏幕旋转事件:orientationchange
  6. var resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize'
  7. // 重计算方法
  8. var recalc = function () {
  9. var docEl = doc.documentElement
  10. // window.orientation 已从Web标准中删除
  11. var orientation
  12. if (win.screen.orientation) {
  13. orientation = win.screen.orientation.angle
  14. } else {
  15. orientation = win.orientation
  16. }
  17. var clientWidth = docEl.clientWidth
  18. if (orientation === 0 || orientation === 180) {
  19. // 竖屏 portrait
  20. clientWidth = docEl.clientWidth
  21. } else if (orientation === 90 || orientation === 270 || orientation === -90) {
  22. // 横屏 landscape
  23. clientWidth = docEl.clientHeight
  24. }
  25. // 以设计稿宽度为最大限制
  26. // clientWidth = clientWidth > designWidth ? designWidth : clientWidth
  27. var fontSize = clientWidth / designWidth * 100
  28. docEl.style.fontSize = fontSize + 'px'
  29. }
  30. // 绑定事件
  31. // win.addEventListener(resizeEvt, recalc, false)
  32. doc.addEventListener('DOMContentLoaded', recalc, false)
  33. })(window, document)