美文网首页
rem自动适配

rem自动适配

作者: 追马的时间种草 | 来源:发表于2021-10-05 17:56 被阅读0次

rem.js

 (function(win){
     let doc=win.document;
     let docEl=doc.documentElement;
     let tid;
     function refreshRem(){
       //获取屏幕宽度
       let width=docEl.getBoundingClientRect().width;
       //将屏幕宽度分成7.5份,1份是1rem
       let rem=width/7.5;
       //设置根节点字号
       docEl.style.fontSize=rem+'px'
     }
     refreshRem()
     //屏幕比例改变时
     win.addEventListener('resize',function(){
         clearTimeout(tid)
         tid=setTimeOut(refreshRem,10)
     })
     //会话框改变时(包括页面前进后退)
     win.addEventLisener('pageShow',function(){
         clearTimeout(tid)
         tid=setTimeOut(refreshRem,10)
     })
  })(window)

main.js中引入即可import '@/assets/js/rem.js'

相关文章

  • rem自动适配

    rem.js 在main.js中引入即可import '@/assets/js/rem.js'

  • vue3.x移动端适配px2rem

    1、什么是px2rem px2rem是一个插件能将px自动转换为rem,以适配各种不同的屏幕尺寸。前端开发可以直接...

  • rem移动端适配个人总结

    步骤1:根据需求选择一种竖屏适配 横竖屏适配 步骤2:样式文件。submile自动转rem(安装插件的前提,附安装...

  • 适配rem

    PPI 计算 适配rem

  • 2019-07-31

    PostCSS的插件 -- 关于vue rem适配布局方案 PostCSS的插件 作用:用于自动将像素单元生成re...

  • 前端常用开源库

    1、lib-flexible H5项目适配开源库,自动根据屏幕宽度以及设置的转换rem的基准px,自动转换页面设置...

  • 解决vue移动端适配问题

    1,先看看网上关于移动端适配讲解 再聊移动端页面适配,rem和vw适配方案! 基础点:rem相对根节点 字体的大小...

  • 解决vue移动端适配问题

    1,先看看网上关于移动端适配讲解 再聊移动端页面适配,rem和vw适配方案! 基础点:rem相对根节点字体的大小。...

  • React 配置 rem (移动端适配)

    移动端适配方案介绍 在移动端中,为了设配不同的设备,通常使用rem来做适配。 rem是通过根元素进行适配的,网页中...

  • 移动端适配及pc端跳转代码

    移动端rem适配 pc端跳转

网友评论

      本文标题:rem自动适配

      本文链接:https://www.haomeiwen.com/subject/mbugnltx.html