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+iview实现文件上传
Nov 17 Vue.js
Vue 的 v-model用法实例
Nov 23 Vue.js
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
vue使用element-ui实现表单验证
Dec 13 Vue.js
Vue在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 Vue.js
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
VUE实现吸底按钮
Mar 04 Vue.js
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
vue3语法糖内的defineProps及defineEmits
Apr 14 Vue.js
vue elementUI批量上传文件
Apr 26 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缓存类代码(附详细说明)
2011/06/09 PHP
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
php封装的验证码工具类完整实例
2016/10/19 PHP
用 Javascript 验证表单(form)中多选框(checkbox)值
2009/09/08 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
2013/02/05 Javascript
javascript定时变换图片实例代码
2013/03/17 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
2015/03/05 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
2015/03/26 Javascript
javascript实现省市区三级联动下拉框菜单
2015/11/17 Javascript
js实现动态创建的元素绑定事件
2016/07/19 Javascript
Bootstrap 模态框(Modal)插件代码解析
2016/12/21 Javascript
angular forEach方法遍历源码解读
2017/01/25 Javascript
React-Native左右联动List的示例代码
2017/09/21 Javascript
JavaScript中concat复制数组方法浅析
2019/01/20 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
2019/09/02 Javascript
分享15个最受欢迎的Python开源框架
2014/07/13 Python
python实现字符串和日期相互转换的方法
2015/05/13 Python
python实现决策树分类算法
2017/12/21 Python
对python中使用requests模块参数编码的不同处理方法
2018/05/18 Python
python matplotlib实现双Y轴的实例
2019/02/12 Python
Django模型序列化返回自然主键值示例代码
2019/06/12 Python
Python 3.6 中使用pdfminer解析pdf文件的实现
2019/09/25 Python
python3中关于excel追加写入格式被覆盖问题(实例代码)
2020/01/10 Python
Windows下Anaconda和PyCharm的安装与使用详解
2020/04/23 Python
python中return如何写
2020/06/18 Python
python三引号如何输入
2020/07/06 Python
python使用scapy模块实现ping扫描的过程详解
2021/01/21 Python
css3的transition属性详解
2014/12/15 HTML / CSS
工程地质勘察专业大学生求职信
2013/10/13 职场文书
社团2014年植树节活动总结
2014/03/11 职场文书
实习推荐信
2014/05/10 职场文书
政治学求职信
2014/06/03 职场文书
本科应届生自荐信
2014/06/29 职场文书
2014旅游局领导班子四风问题对照检查材料思想汇报
2014/09/19 职场文书
上甘岭观后感
2015/06/10 职场文书
使用Oracle跟踪文件的问题详解
2021/06/28 Oracle