首页 > 其他分享 >vue H5样式适配PC端分辨率

vue H5样式适配PC端分辨率

时间:2023-01-17 10:13:23浏览次数:46  
标签:vue dpr 适配 H5 width rem flexible js

VUE H5样式适配PC端分辨率

VUE2 vue-element-admin 脚手架,版本4.4.0,使用笔记本开发125%,在其它电脑端显示时分辨率不是125%的情况下,样式会发生变化,看到的与自己本地开发环境的样式不一样。

image-20230117091145697

image-20230117090948375

1.安装依赖

 npm install postcss-px2rem px2rem-loader --save
 npm i lib-flexible --save

main.js文件中导入flexible

// 23-1-16 PC分辨率
import "@/utils/flexible"; 

2.flexible文件

image-20230117092918772

node_modules 文件夹下,找到刚安装的新依赖的文件夹lib-flexble,打开找到flexible.js文件拷贝一份,放到src下的utils文件夹下

image-20230117093749256

修改flexible.js文件 function refreshRem()函数方法体

    function refreshRem(){
        // 源码
        // var width = docEl.getBoundingClientRect().width;
        // if (width / dpr > 540) {
        //     width = 540 * dpr;
        // }
        // var rem = width / 10;
        // docEl.style.fontSize = rem + 'px';
        // flexible.rem = win.rem = rem;

        // 修改自适应PC分辨率
        var width = docEl.getBoundingClientRect().width;
        // if (width / dpr > 540) {
        //     width = 540 * dpr;
        // }
        if (width / dpr < 810) {
          width = 810 * dpr;
        }
        if (width / dpr < 1300) {
          width = 1300 * dpr;
        }
        if (width / dpr < 1920) {
          width = 1920 * dpr;
        }
          if (width / dpr < 2560) {
          width = 2560 * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + "px";
        flexible.rem = win.rem = rem;
    }

3.vue.config.js

vue.config.js文件chainWebpack(config)函数中添加

      config.module
      .rule("css")
      .test(/\.css$/)
      .oneOf("vue")
      .use("px2rem-loader")
      .loader("px2rem-loader")
      .options({
        remUnit: 192,
        remPrecision: 8,
      })
      .end();

vue.config.js文件module.exports 中添加

  css: {
    loaderOptions: {
      postcss: {
        plugins: [postcss]
      },
    },
  },

完成以上配置需要,重新对一些以前修改的样式重新调整.

标签:vue,dpr,适配,H5,width,rem,flexible,js
From: https://www.cnblogs.com/oioi/p/17057073.html

相关文章

  • Vue简介
             ......
  • vue select 组件封装及调用
    子组件 mySelect.vue<template><divclass="mySelect"><el-selectv-model="value1"placeholder="请选择"@change="handleSelect"><el-option......
  • VUE3企业级项目基础框架搭建流程(1)
    开发环境和技术栈操作系统windows11开发工具vscode、phpstudy(小皮):nginx1.15.11,mysql5.7.26,php7.4,NavicatforMySQL前端VUE3、TypeScript、SCSS、ElementUi、R......
  • VUEX 使用学习三 : mutations
    转载请注明出处:在Vuex中store数据改变的唯一方法就是提交 mutations。mutations里面装着一些改变数据方法的集合,这是Vuex设计很重要的一点,就是把处理数据逻辑方......
  • VUEX state 的使用学习二
    转载请注明出处:state提供唯一的数据资源,所有的共享的数据都要统一放到store中的state中进行存储;状态state用于存储所有组件的数据。管理数据//初始化vue......
  • VUE项目创建&安装vue等
    npminstall--savevue-hot-reload-api升级或安装cnpmnpminstallcnpm-g升级npmcnpminstallnpm-g最新稳定版$cnpminstallvue@next全局安装vue-cliya......
  • VUEX 的使用学习一
    转载请注明出处:一、Vuex是什么?介绍:Vuex是一个专为[Vue](https://so.csdn.net/so/search?q=Vue&spm=1001.2101.3001.7020).js应用程序开发的状态管理模式。它采用......
  • 用Three.js写h5小游戏-3d飞机大战
    用Three.js写h5小游戏-飞机大战​​博主的话​​​​运行图片​​​​目录路径!​​index.html​​博主的话Three.js是js的一个3D引擎,比较复杂。比如光是Three.js就附带了10......
  • 开源Vue表格组件,表格插件源码
    开源Vue表格组件,表格插件源码前言:关于html里面原生的table,通常满足不了程序员的要求。所以开发了一款表格插件,其功能有:1导入json格式数据后,自动填充表格。表格长宽自适应、......
  • Vue中使用前端形式过滤已返回到数据列表
    已经返回到列表,通过前端的搜索框再次过滤,而不走查询api。returngetDeviceListByCellIdApi(this.params).then((res)=>{//res.resultsconsole.l......