vue3.0 自适应不同分辨率电脑的操作


Posted in Vue.js onFebruary 06, 2021

首先我们需要要安装一些依赖

npm i lib-flexible-computer -S //根节点会根据页面视口变化而变化font-size大小
npm i px2rem-loader -D//自动将px转换为rem
npm i postcss-px2rem//将代码中px自动转化成对应的rem的一个插件

这里要和大家说的就是lib-flexible-computer这个npm装的依赖,想必大家为了做pc的适配搜索了很多方法他们大多数都是安装的下面这个依赖

npm i lib-flexible -S

安装这个依赖,做适配的话只能做到屏幕540一下的,pc端使用并不是很好使所以就换成了上面写那个依赖
废话不多说
下面进入正题
安装好依赖怎么使用

在main.js中引入

import "lib-flexible-computer";

然后在src同级下建立一个vue.config.js文件
并在此文件中加入以下代码

module.exports = {
 publicPath: "./",
 outputDir: "dist",
 lintOnSave: true,
 css: {
  loaderOptions: {
   css: {},
   postcss: {
    plugins: [
     require("postcss-px2rem")({
      remUnit: 192///设计图宽度/10
     })
    ]
   }
  }
 }
};

这样在不同分辨率电脑生自己代码就会自动转换成rem
注:**

上面已经设置了设计图的大小,这些操作做完之后,设计图多大你就写多大就行,已经可以自动转换了

**

到此这篇关于vue3.0 自适应不同分辨率电脑的文章就介绍到这了,更多相关vue3.0 自适应分辨率电脑内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
详解Vue 的异常处理机制
Nov 30 Vue.js
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
Vue仿百度搜索功能
Dec 28 Vue.js
vue自定义组件实现双向绑定
Jan 13 Vue.js
Vue看了就会的8个小技巧
Jan 21 Vue.js
原生JS封装vue Tab切换效果
Apr 28 Vue.js
关于vue中如何监听数组变化
Apr 28 Vue.js
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
一篇文章学会Vue中间件管道
Jun 20 Vue.js
vue+element ui实现锚点定位
Jun 29 Vue.js
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
vue使用echarts画组织结构图
Feb 06 #Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 #Vue.js
解决vue项目本地启动时无法携带cookie的问题
Feb 06 #Vue.js
如何封装Vue Element的table表格组件
Feb 06 #Vue.js
Vue实现圆环进度条的示例
Feb 06 #Vue.js
vue浏览器返回监听的具体步骤
Feb 03 #Vue.js
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 #Vue.js
You might like
php定义数组和使用示例(php数组的定义方法)
2014/03/29 PHP
PHP基于单例模式实现的数据库操作基类
2016/01/15 PHP
PHP执行linux命令常用函数汇总
2016/02/02 PHP
PHP实现适用于自定义的验证码类
2016/06/15 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
TP3.2批量上传文件或图片 同名冲突问题的解决方法
2017/08/01 PHP
PHP+mysql防止SQL注入的方法小结
2019/04/27 PHP
js nextSibling属性和previousSibling属性概述及使用注意
2013/02/16 Javascript
自己动手手写jQuery插件总结
2015/01/20 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
Jquery技巧(必须掌握)
2016/03/16 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
2017/02/27 Javascript
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
详解A标签中href=""的几种用法
2017/08/20 Javascript
详细分析jsonp的原理和实现方式
2017/11/20 Javascript
nginx+vue.js实现前后端分离的示例代码
2018/02/12 Javascript
js使用Promise实现简单的Ajax缓存
2018/11/14 Javascript
基于javascript实现放大镜特效
2020/12/03 Javascript
python监控键盘输入实例代码
2018/02/09 Python
用Python编写一个高效的端口扫描器的方法
2018/12/20 Python
详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)
2020/04/01 Python
python中的django是做什么的
2020/07/31 Python
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
Troy-Bilt官网:草坪割草机、吹雪机、分蘖机等
2019/02/19 全球购物
JD Sports丹麦:英国领先的运动时尚零售商
2020/11/24 全球购物
劳资人员岗位职责
2013/12/19 职场文书
优秀中学生事迹材料
2014/01/31 职场文书
工地质量标语
2014/06/12 职场文书
2014年财务个人工作总结
2014/12/08 职场文书
董事长岗位职责
2015/02/13 职场文书
送达通知书
2015/04/25 职场文书
欠条格式范本
2015/07/03 职场文书
2016七一建党节慰问信
2015/11/30 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
JavaScript中时间格式化新思路toLocaleString()
2021/11/07 Javascript
JavaScript阻止事件冒泡的方法
2021/12/06 Javascript