位置: 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以下字体的三种方法(设置浏览器显示网络异常)

  • 车船使用税代扣怎么计算
  • 资产总额是营业收入吗
  • 应付票据与应付账款
  • 航天信息服务费不交可以吗
  • 长期股权投资审计说明
  • 建筑企业简易计税异地预缴
  • 长期待摊费用摊销表
  • 购入无形资产产生的咨询费
  • 审工资的流程
  • 税号变更需要变更什么
  • 已抵扣发票红冲后发票还给对方公司
  • 不动产所占份额
  • 当期损益包括哪些费用
  • 工会经费由企业和职工共同负担吗
  • 个体户开劳务费税率
  • 查找我的iphone怎么添加设备
  • windows11家庭版本地策略组
  • 利息如何做会计分录
  • win10wifi老是自动断开怎么回事
  • 员工福利费账务处理
  • 融资租赁的租金是什么意思
  • js日期字符串转换为指定格式的日期
  • html img位置
  • 公司年终奖怎么缴税
  • 商品购进核算
  • 公积金怎么做会计科目
  • 租车接送员工上班怎么样
  • 补缴的土地出让金需要计提吗
  • 附有销售退回条款的销售中,每一资产负债表日
  • 出口退税的账怎么做
  • redis设置内存淘汰策略
  • joomla安装教程
  • 服务业增值税加计扣除账务处理
  • esp8266 dht22
  • 按适用税率计税销售额与应税货物销售额不一致
  • php生成证书图片
  • tomcat-juli
  • 资产负债表上应付账款是负数
  • 企业在建工程领用原材料的会计分录
  • 技术服务费发票图片
  • db2 connect命令
  • 个人所得税手续费返还增值税申报表怎么填
  • 营改增利息收入增值税
  • 盈利能力还有什么能力
  • 营业净利率和总资产周转率正相关
  • 汇算清缴涉及的税种
  • 应收分保合同准备材料
  • 印花税如何申请退税
  • 会计凭证的做账原则
  • 没开发票能确认没开发票能确认收入申报纳税吗?
  • 收到社会保险基金结算表
  • 预付账款怎样做会计分录
  • 收到红字发票如何入账
  • 微软9月30日将发行股票
  • linux日志类型
  • bios关闭pxe
  • mscorsvw.exe是什么进程
  • windows7自带的画图软件在哪里打开
  • ghoststarttrayapp.exe是什么进程 有什么作用 ghoststarttrayapp进程查询
  • windows局域网共享文件用的什么协议
  • win7调出ie浏览器
  • 访问win10
  • iis7.0是什么
  • linux怎么修改主配置文件
  • win10系统如何创建家庭组
  • 内存一次性读多少字节
  • 低端显卡n卡设置
  • 请问在javascript程序中
  • 脚本添加crontab
  • Web2.0下XHTML+CSS 设计需要注意的地方小结
  • batch批处理
  • unity rpg插件
  • javascript基础
  • JavaScript+html5 canvas实现本地截图教程
  • NGUI之UITexture
  • python发送信息到微信
  • python字符串的用法
  • 税务软件服务商
  • 企业登录初始密码
  • 什么叫企业改制重组
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设