zoukankan      html  css  js  c++  java
  • js插件

    fullPage.js
    全屏滚动,官网

    highlight.js
    代码高亮,官网
    预览效果,针对Markdown,【注意,在```正文中不要有@字符】

    flexible.js
    屏幕自适应

    • 为html添加data-dpr属性和style属性,style添加font-size作为1rem的基准值。
    • 改写meta标签,根据dpr设置设备的缩放比
    (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));
    

    关于dpr
    设备像素比 = 物理像素 / 逻辑像素(px)
    相关参考:dpr理解

    ECharts.js

    echart学习教程

  • 相关阅读:
    坐标系的冷知识2
    坐标系的冷知识
    XMPP即时通讯(代码实现)
    约束问题
    实现ios屏幕的横竖屏自适应
    3D Touch ? 木有6s,也阔以玩!!!
    Autolayout
    Xcode7免证书真机调试
    微信支付
    二维码扫描
  • 原文地址:https://www.cnblogs.com/wjcx-sqh/p/11322971.html
Copyright © 2011-2022 走看看