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 18 Vue.js
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
对vue生命周期的深入理解
Dec 03 Vue.js
vue 通过base64实现图片下载功能
Dec 19 Vue.js
Vue仿Bibibili首页的问题
Jan 21 Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
深入理解Vue的数据响应式
May 15 Vue.js
Vue+Flask实现图片传输功能
Apr 01 Vue.js
vue实现Toast组件轻提示
Apr 10 Vue.js
vue实力踩坑之push当前页无效
Apr 10 Vue.js
vue修饰符.capture和.self的区别
Apr 22 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
使用数据库保存session的方法
2006/10/09 PHP
常用的php ADODB使用方法集锦
2008/03/25 PHP
PHP 程序员也要学会使用“异常”
2009/06/16 PHP
php分页示例分享
2014/04/30 PHP
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
thinkphp5框架API token身份验证功能示例
2019/05/21 PHP
10个基于浏览器的JavaScript调试工具分享
2013/02/07 Javascript
判定是否原生方法的JS代码
2013/11/12 Javascript
javascript回车完美实现tab切换功能
2014/03/13 Javascript
javascript函数特点实例分析
2015/05/14 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
2016/10/11 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
JS实现登录页密码的显示和隐藏功能
2017/12/06 Javascript
JS 数组随机洗牌的实例代码
2018/09/12 Javascript
JS实现换肤功能的方法实例详解
2019/01/30 Javascript
vue实现pdf文档在线预览功能
2019/11/26 Javascript
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
[51:10]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Centos5.x下升级python到python2.7版本教程
2015/02/14 Python
Python实现字典的遍历与排序功能示例
2017/12/23 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
Django Celery异步任务队列的实现
2019/07/24 Python
python 定义类时,实现内部方法的互相调用
2019/12/25 Python
python实现俄罗斯方块小游戏
2020/04/24 Python
入党申请书自我鉴定
2013/10/12 职场文书
2013年入党人员的自我鉴定
2013/10/25 职场文书
中学家长会邀请函
2014/01/17 职场文书
大学生会计职业生涯规划范文
2014/02/28 职场文书
合作协议书怎么写
2014/04/18 职场文书
企业口号大全
2014/06/12 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
红旗渠导游词
2015/02/09 职场文书
关于环保的宣传稿
2015/07/23 职场文书
经典人生语录分享:不畏将来,不念过去,笑对当下
2019/12/12 职场文书
简单且有用的Python数据分析和机器学习代码
2021/07/02 Python