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 26 Vue.js
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
vue element实现表格合并行数据
Nov 30 Vue.js
vue实现表格合并功能
Dec 01 Vue.js
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
vue 数据操作相关总结
Dec 17 Vue.js
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
vue3语法糖内的defineProps及defineEmits
Apr 14 Vue.js
关于vue-router-link选择样式设置
Apr 30 Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 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自动更新新闻DIY
2006/10/09 PHP
Gregarius中文日期格式问题解决办法
2008/04/22 PHP
jQuery 源码分析笔记
2011/05/25 PHP
PHP变量内存分配问题记录整理
2013/11/27 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
javascript简易缓动插件(源码打包)
2012/02/16 Javascript
jQuery提交表单ajax查询实例代码
2012/10/07 Javascript
jQuery操作Select的Option上下移动及移除添加等等
2013/11/18 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
一次$.getJSON不执行的简单记录
2016/07/19 Javascript
js分页之前端代码实现和请求处理
2017/08/04 Javascript
微信小程序画布圆形进度条显示效果
2020/11/17 Javascript
JS实现的RC4加密算法示例
2018/08/16 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
2018/08/19 Javascript
NodeJS加密解密及node-rsa加密解密用法详解
2018/10/12 NodeJs
JavaScript this绑定过程深入详解
2018/12/07 Javascript
Vue组件的使用及个人理解与介绍
2019/02/09 Javascript
小程序hover-class点击态效果实现
2019/02/26 Javascript
Vue实现Layui的集成方法步骤
2020/04/10 Javascript
[06:43]DAC2018 4.5 SOLO赛 Maybe vs Paparazi
2018/04/06 DOTA
python3实现windows下同名进程监控
2018/06/21 Python
python3 实现验证码图片切割的方法
2018/12/07 Python
5款Python程序员高频使用开发工具推荐
2019/04/10 Python
python解析xml简单示例
2019/06/21 Python
pandas.cut具体使用总结
2019/06/24 Python
python字符串反转的四种方法详解
2019/12/02 Python
Python控制台输出时刷新当前行内容而不是输出新行的实现
2020/02/21 Python
python中sort sorted reverse reversed函数的区别说明
2020/05/11 Python
使用python实现时间序列白噪声检验方式
2020/06/03 Python
python如何查看安装了的模块
2020/06/23 Python
python程序如何进行保存
2020/07/03 Python
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
学习十八大坚定理想信念心得体会
2014/03/11 职场文书
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python
JS开发前端团队展示控制器来为成员引流
2022/08/14 Javascript