淘宝flexible.js基本原理及源码分析以及使用

最新推荐文章于 2024-09-05 23:45:00 发布

前端不加班

最新推荐文章于 2024-09-05 23:45:00 发布

阅读量1.3k

点赞数 1

分类专栏： js原生文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_49515138/article/details/128091840

版权

js原生专栏收录该内容

37 篇文章 0 订阅

订阅专栏

该博客介绍了flexible.js的原理和使用方法，它通过动态设置html的font-size来调整rem单位，实现不同设备上的适配。在页面加载和窗口resize时，会重新计算rem值，确保在高分辨率屏幕上的细节表现。同时，检测0.5px边框的支持，以优化高清屏幕的显示效果。在Vue项目中，可以在main.js中引入flexible.js进行适配。

摘要由CSDN通过智能技术生成

flexible总的思想就是利用动态设置根元素(html标签)的font-size大小，来动态改变css3中rem这个单位中对应px的大小。
因为html的font-size默认为16px，所以，1rem就默认为16px。
flexible的思想是把整个视图宽度区域分为10份，每一份为一个1rem，总的就是10rem。例如375px的宽度，那么1rem就是37.5px，因此设置根元素的font-size为37.5px。

//flexible.js源码如下；
(function flexible(window,document){//首先是一个立即执行函数，执行的时候传入参数window,document
 var docEl = document.documentElement //返回文档的root元素，即根元素html
 var dpr = window.devicePixelRatio || 1 //获取设备的dpr，即当前设置下物理像素与虚拟像素的比值


 //调整body标签的fontSize
 //设置默认字体的大小，默认字体的大小继承自body
 function setBodyFontSize(){
     if(document.body){
         document.body.style.fontSize = (12 * dpr) + 'px'
     }else {
         document.addEventListener('DOMContentLoaded',setBodyFontSize)
     }
 }
 setBodyFontSize();

 //设置 1rem = viewWidth / 10
 function setRemUnit(){
     var rem = docEl.clientWidth / 10
     docEl.style.fontSize = rem + 'px'
 }

 setRemUnit();

 //在页面resize或者pageshow重新设置rem
 window.addEventListener('resize',setRemUnit)
 window.addEventListener('pageshow',function(e){
     if(e.persisted){//某些浏览器，重新展示页面时，走的是页面展示缓存
         setRemUnit();
     }
 })

 //检测0.5px的支持，支持则root元素的class有hairlines
 //解决1px在高清屏多像素问题
 if(dpr>= 2){
     var fakeBody = document.createElement('doby');
     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))

(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))

vue 项目在main.js中引入

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

//公共css文件
import './assets/css/common.css'
//淘宝无线适配
import './assets/js/flexible'

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");