• 当浏览器窗口改变大小时,如何让文字也相应改变大小


    js

     1 (function flexible (window, document) {
     2   var docEl = document.documentElement
     3   var dpr = window.devicePixelRatio || 1
     4 
     5   // adjust body font size
     6   function setBodyFontSize () {
     7     if (document.body) {
     8       document.body.style.fontSize = (12 * dpr) + 'px'
     9     }
    10     else {
    11       document.addEventListener('DOMContentLoaded', setBodyFontSize)
    12     }
    13   }
    14   setBodyFontSize();
    15 
    16   // set 1rem = viewWidth / 10
    17   function setRemUnit () {
    18     var rem = docEl.clientWidth / 24
    19     console.log(docEl.clientHeight)
    20     console.log(window)
    21     docEl.style.fontSize = rem + 'px'
    22   }
    23 
    24   setRemUnit()
    25 
    26   // reset rem unit on page resize
    27   window.addEventListener('resize', setRemUnit)
    28   window.addEventListener('pageshow', function (e) {
    29     if (e.persisted) {
    30       setRemUnit()
    31     }
    32   })
    33 
    34   // detect 0.5px supports
    35   if (dpr >= 2) {
    36     var fakeBody = document.createElement('body')
    37     var testElement = document.createElement('div')
    38     testElement.style.border = '.5px solid transparent'
    39     fakeBody.appendChild(testElement)
    40     docEl.appendChild(fakeBody)
    41     if (testElement.offsetHeight === 1) {
    42       docEl.classList.add('hairlines')
    43     }
    44     docEl.removeChild(fakeBody)
    45   }
    46 }(window, document))

    在css上将px定值换算为rem,这里的话如果电脑宽度1920,则1920/24,换算比例是80px=1rem

  • 相关阅读:
    [转]快速矩阵快速幂
    继续学习C:数字进制表示
    pthread_cond_wait()用法分析
    [原]NYOJ-光棍的yy-655
    [原]NYOJ-组合数-32
    [转]_int64、long long 的区别
    [原]NYOJ-6174问题-57
    [转]sscanf函数具体用法
    [原]NYOJ-A*B Problem II-623
    集存款(复利单利)贷款为一体的计算器(最新版)
  • 原文地址:https://www.cnblogs.com/liazhimao/p/13954626.html
Copyright © 2020-2023  润新知