flexible.js 1.2 KB

12345678910111213141516171819202122232425262728
  1. 'use strict'
  2. ;(function (win, doc) {
  3. // 设计稿宽度
  4. var designWidth = 720
  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 = (win.screen.orientation && win.screen.orientation.angle) || win.orientation
  12. var clientWidth = docEl.clientWidth
  13. if (orientation === 0 || orientation === 180) {
  14. // 竖屏 portrait
  15. clientWidth = docEl.clientWidth
  16. } else if (orientation === 90 || orientation === - 90) {
  17. // 横屏 landscape
  18. clientWidth = docEl.clientHeight
  19. }
  20. // 以设计稿宽度为最大限制
  21. clientWidth = clientWidth > designWidth ? designWidth : clientWidth
  22. var fontSize = clientWidth / designWidth * 100
  23. docEl.style.fontSize = fontSize + 'px'
  24. }
  25. // 绑定事件
  26. win.addEventListener(resizeEvt, recalc, false)
  27. doc.addEventListener('DOMContentLoaded', recalc, false)
  28. })(window, document)