首页 > 其他分享 >vue 中 使用flexible+rem 实现页面元素 随窗口大小自适应w

vue 中 使用flexible+rem 实现页面元素 随窗口大小自适应w

时间:2022-11-20 11:24:28浏览次数:57  
标签:vue var window rem docEl flexible document

 

 1.引入flexible.js     这个适用于ui图1920px   其他大小需对应调整

  flexible.js 把屏幕分为24等份  把下面的代码复制到项目中  新建一个 js文件

(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 / 24 
  function setRemUnit() {
    var rem = docEl.clientWidth / 24;
    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);

 

 

 2.在main.js 全局引入

 

 3.vscode下载cssrem 插件 然后设置

示例代码

 

 

 示例:

 

 

 

 

  

 

标签:vue,var,window,rem,docEl,flexible,document
From: https://www.cnblogs.com/zyzlb/p/16908076.html

相关文章

  • vue3 基础-API-computed
    API-computed基本使用前些章节讲了一些常用的api如setup,ref,reactive,toRef...等,并以一个todoList的小案例来体现在vue3中如何进行......
  • vue3 基础-API-watch 和 watchEffect
    watch和watchEffect前篇对computed属性如何在api中基本使用,即从vue中引入,然后通过直接传函数或者传对象的方式,开箱即用,非常清晰易......
  • 4. Vue 【进阶】- 模板引擎
    Vue【进阶】-模板引擎vue的源码学习流程和知识点分析本次您将学习到的东西前期准备1.简介1.1什么是模板引擎模板引擎是将数据要变为视图最优雅的解决方案1......
  • 5. Vue 【进阶】- AST 抽象语法树
    Vue【进阶】-AST抽象语法树1.AST简介在开发Vue的时候编译器会将模板语法编译成正常的HTML语法,而直接编译的时候是非常困难的,因此此时会借助AST抽象语法树进行周转,进......
  • Vue3 之 ref、shallowRef、customRef
    ref把对象转化为响应式的;shallowRef是浅层响应式数据,即:只有对value整体修改,才能更新到视图层。而修改具体属性值时,不会更新视图。(shallowReactive和shallowRef一样的......
  • Vue3 npm 命令解析
    我们使用npmrunxxx命令,在nodeMoudles里面,vite目录做了一个软链接,然后去软链接下面的目录去找,有3个vite的配置,适应不同的平台做的(unix、windows、mac等)流程:1、本地n......
  • Vue XQTypeScriptFramework 使用
    说明XQTypeScriptFramework隶属于XQFramework下JS基础性框架部分XQFramework励志将开发将常用开发语音基础性框架统一汇总,为全站开发使用到的基础语法进行统一,拜......
  • autohotkey video remote 遥控器
    C:\my_script\videoRemote\remoteKey.ahkGroupAdd,remoteKey,ahk_exemsedge.exeGroupAdd,remoteKey,ahk_exechrome.exeGroupAdd,remoteKey,ahk_exe哔哩哔哩.......
  • vue2 echarts 报错 mounted Initialize failed: invalid dom. 的一种解决方法
    如题参考了https://blog.csdn.net/weixin_52418790/article/details/123690752但是还是不行,后来发现我这个是在elementui的模态框里面写的,但是模态框还没有......
  • 我的第一个项目(二):使用Vue做一个登录注册界面
    好家伙, 顶不住了,太多的bug,本来是想把背景用canvas做成动态的,但是,出现了各种问题为了不耽误进度,我们先把一个简单的登录注册界面做出来 来看看效果:  (看上去还......