当前位置: 首页 > article >正文

vue使用rem适配各种分辨率设备

1.首先定义一个函数

export function adapt(win, doc) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            //这里是假设在750px宽度设计稿的情况下,1rem = 20px;
            //可以根据实际需要修改
            // 3.90625意思是在横屏下 1rem=10px
            docEl.style.fontSize = 10 * 3.90625 * (clientWidth / 750) + 'px';
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
};

2.引用后,在App.vue里面调用即可

mounted() {
    adapt(window, document);
  },

然后所有页面都可以使用rem为单位了,我的算法是pc端适配竖屏,你可以改改数字,比如docEl.style.fontSize = clientWidth / 1920+ ‘px’,控制1px=1rem,这样转换更方便。


http://www.kler.cn/a/371344.html

相关文章:

  • 四、Prompt工程——简单应用
  • 项目1 yolov5鱼苗检测计数
  • 创作三周年:在忙碌中寻找灵感与快乐
  • centos7 zabbix监控nginx的pv和uv和status_code
  • 【ubuntu20联网】ubuntu20.04正常使用网络,解决校园以太网无法连接问题
  • Footprint Analytics 现已支持 TRON 链上数据分析
  • 【PTA】4-2 树的同构【数据结构】
  • 鸿蒙的底部菜单导航实现
  • appium自动化对已打开的app操作
  • pdf转为txt文本格式并使用base64加密输出数据
  • 事务的原理、MVCC的原理
  • Pytest的测试用例相关问题总结
  • Linux下安装软件
  • 江协科技STM32学习- P22 实验-ADC单通道/ADC多通道
  • 交叉编译 lmbench(riscv64)
  • synchronized进阶原理
  • Python实现全国岗位招聘信息可视化分析(源码+论文+部署讲解)
  • 中国分省统计面板数据(2004-2023)-最新出炉_附下载链接
  • JavaEE初阶------网络编程续+传输层UDP协议介绍
  • Educational Codeforces Round 171 (Rated for Div. 2) A~E
  • 【Linux】动静态库:构建强大软件生态的基石
  • 张量分析与连续介质力学
  • 【vue】07.自定义指令
  • GitHub Copilot将支持来自Anthropic、Google和OpenAI的模型
  • 双指针——对撞指针与左右指针
  • Twitter网页版怎么登录?详细步骤与常见问题解答