位置: IT常识 - 正文

vue 如何让PC端不同屏幕大小分辨率自适应(屏幕自适应)(postcss-px2rem、px2rem-loader、lib-flexible)(vue适配pc)

编辑:rootadmin
vue 如何让PC端不同屏幕大小分辨率自适应(屏幕自适应)(postcss-px2rem、px2rem-loader、lib-flexible) vue 如何让PC端不同屏幕大小分辨率自适应

推荐整理分享vue 如何让PC端不同屏幕大小分辨率自适应(屏幕自适应)(postcss-px2rem、px2rem-loader、lib-flexible)(vue适配pc),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue怎么适配电脑端和手机端,vue适配pc,vue怎么阻止默认事件,vue怎么阻止默认事件,vue写pc端,vuepc端网页,vue写pc端,vuepc端网页,内容如对您有帮助,希望把文章链接给更多的朋友!

前提:因为项目需求是在已有的项目里面增加自适应,不影响其他页面的已有的布局,以下方法仅供参考。

vue 如何让PC端不同屏幕大小分辨率自适应(屏幕自适应)(postcss-px2rem、px2rem-loader、lib-flexible)(vue适配pc)

1、安装postcss-px2rem 、px2rem-loader、lib-flexible

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

2、在根目录src中新建util目录下新建flexible.js等比适配文件 找到node_modules里的lib-flexible包,拷贝一份放在utils里面取名为flexible.js,修改lib-flexible的源码,(更改refreshRem函数)修改为下面的代码就可以了,当然if判断是根据自己需求的调整。 目的:因为lib-flexible的源码是针对移动端的设计方案,我们要实现PC的自适应所以屏幕尺寸也要更换。

function refreshRem() { 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、在 main.js中引入我们刚修改过的flexible.js文件(因为我们更改了源码 ,所有我们需要引入我们改过的文件)

import "@/utils/flexible";

4、在vue.config.js中配置插件

// // 引入等比适配插件const px2rem = require("postcss-px2rem");// 配置基本大小const postcss = px2rem({ //配置rem基准值 基准大小 baseSize remUnit: 192, // 设计稿尺寸1920/10});module.exports = { chainWebpack: (config) => { config.module .rule("css") .test(/\.css$/) .oneOf("vue") .use("px2rem-loader") .loader("px2rem-loader") .options({ remUnit: 192, remPrecision: 8, }) .end(); }, css: { loaderOptions: { postcss: { plugins: [postcss] }, }, },}

注意: 1、改完配置记得重新编译项目 2、如果个别地方不想转化px。可以简单的使用大写的PX或 Px。

本文链接地址:https://www.jiuchutong.com/zhishi/283870.html 转载请保留说明!

上一篇:hpztsb11.exe是什么进程 作用是什么 hpztsb11进程查询(hp是什么代码)

下一篇:设置浏览器显示小于12px以下字体的三种方法(设置浏览器显示网络异常)

  • 非独立核算的分公司可以开票吗
  • 教培行业提成一般多少
  • 收到商业承兑汇票到期,向银行办妥有关入账手续
  • 计提的成本次月怎么处理
  • 资本公积什么情况下转增资本
  • 发票回退是什么情况
  • 固定资产抵债要交税吗怎么交
  • 部门会议要点
  • 公司收到的其他发票
  • 存货可变现净值与成本孰低 考虑销量吗
  • 交车辆购置税可以刷信用卡吗
  • 没有实收资本是负债吗
  • 存货的进项税要计入成本吗
  • 注册资本金印花税减半征收
  • 个人年终奖如何交税
  • 政府专项补助如何处理
  • 固定资产评估增值
  • 个体户收入总额是含税还是不含税
  • 转售水电收入
  • 分期收款销售的核算中发出商品时借什么账户
  • 国外进口的食品还能吃吗
  • 财务分析的起点是企业的内部分析报告
  • 公司审计期间
  • 未知文件格式怎么打开
  • i912900k用什么主板好
  • 票据的追索权与再追索权
  • 销售免费样品账务处理
  • 税控盘进项税已抵扣如何转出分录
  • 台式电脑组装过程视频
  • 如何看待税收的本质
  • laravel框架的优缺点
  • 数字孪生demo
  • 人工智能示例
  • bootstrap框架的理解
  • opencv训练模型教程
  • 增值税密码锁定怎么办
  • 公允价值变动损益
  • 销售费用进项税额转出会计分录怎么写
  • 以下哪些企业需要填报
  • python tkinter ttk
  • dedecms配置
  • sql获取第一条记录的内容
  • 外贸企业有哪些公司青岛
  • 加工企业进项发票有哪些
  • 税票和发票的区别图片
  • 科技型中小企业享受优惠税收政策
  • 废品材料回收的会计分录
  • 车辆购置税收优惠
  • mysql乱码问题怎么解决
  • 以前年度多交的房产税现在收到退税款了咋做分录
  • 个体户需要实缴吗
  • 车船税是什么样子的?
  • 总公司账务处理
  • 支付一年房租费怎么做账
  • 关于购买安保器材的报告
  • 单独计价作为固定资产入账的土地为什么不计提折旧
  • 冲减以前年度未开票收入开票如何申报小规模纳税人
  • 转出未交增值税借方余额表示什么
  • 在mysql中使用视图的限制
  • win10快速启动什么意思
  • u极速u盘装系统
  • mac重装macos
  • centos 安装svn
  • win10系统找不到mrt
  • vm15虚拟机安装
  • win8的系统怎么装win7
  • win8的显示设置
  • 电脑因故障出现问题而启动
  • 用python写周字
  • js script跨域
  • 三角进攻怎么打
  • javascript的常用例子
  • 为什么python那么难
  • 增值税预缴税款退税申请怎么写
  • 山东网上信访投诉平台
  • 企业所得税季报资产总额怎么填
  • 什么是重点群体
  • 在京东上买货
  • 电子发票怎么作废
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设