位置: IT常识 - 正文

vue开发页面自适应屏幕尺寸(vue 自适应网站ui框架)

编辑:rootadmin
vue开发页面自适应屏幕尺寸 vue开发页面自适应屏幕尺寸1.概述

推荐整理分享vue开发页面自适应屏幕尺寸(vue 自适应网站ui框架),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue 自适应网站ui框架,vue项目自适应页面,vue 自适应网站ui框架,vue设置高度自适应,vue页面自适应屏幕大小,vue项目自适应,vue页面自适应屏幕大小,vue页面自适应屏幕大小,内容如对您有帮助,希望把文章链接给更多的朋友!

vue开发页面自适应屏幕尺寸(vue 自适应网站ui框架)

使用vue开发的页面都是通过px设置它的尺寸,如果换了一个不同尺寸的屏幕就会出现页面排版错乱,显示不完整等情况。下面通过插件将px装换为rem单位适应不同尺寸的屏幕。

2.网页适配屏幕尺寸2.1.安装插件

lib-flexible插件作用是根据rem调整页面宽高,自适应屏幕尺寸 px2rem-loader插件作用是将px单位转换为rem单位,lib-flexible插件才能根据rem调整网页宽高尺寸。

# 安装lib-flexible插件yarn add lib-flexible# 安装px2rem-loader插件 -D 安装到开发环境yarn add -D px2rem-loader2.1.配置插件1.在main.js文件中引用lib-flexible插件import Vue from "vue"import App from "./App.vue"import router from "./router"import store from "./store"import "@/assets/scss/reset.scss"import axios from "axios"// UIimport ElementUI from "element-ui"import "element-ui/lib/theme-chalk/index.css"// tools// 引用lib-flexible插件import "lib-flexible"2.在vue.config.js中配置px2rem-loadermodule.exports = { configureWebpack: { // webpack 配置 output: { filename: , chunkFilename: `, }, }, // 配置px2rem-loader chainWebpack: config => { config.module .rule("css") .test(/\.css$/) .oneOf("vue") .resourceQuery(/\?vue/) .use("px2rem") .loader("px2rem-loader") .options({ // 设置px转化为rem比例,设计稿大小为1920,比例 1920/ 10 remUnit: 192 }); },}3.修改flexible.js

全局搜索flexible.js,将refreshRem函数中原本的540替换为width,这样就实现了宽度根据屏幕大小自动适配. 或者在下面的路径找到该文件:node_modules/lib-flexible/flexible.js

function refreshRem(){ var width = docEl.getBoundingClientRect().width; if (width / dpr > 540) { // 将width = 540 * dpr; 540改为width width = width * dpr; } var rem = width / 10; docEl.style.fontSize = rem + 'px'; flexible.rem = win.rem = rem; }

重启服务,改变浏览器大小网页的内容能够随着页面大小而改变。

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

上一篇:YOLOV5-网络结构和组件介绍(YOLOv5网络结构组成)

下一篇:AI工具(ChatGPT)常用指令,持续更新...(什么是AI工具)

  • 出租房屋取得的收入计入什么
  • 如何解除委托合同范文
  • 火车票进项抵扣怎么勾选
  • 一般纳税人支付给小规模纳税人的税率
  • 个税手机号码没有了怎么办
  • 公司支付代账费怎么入账
  • 附加税退税申请表的填
  • 外商投资企业土地使用税什么时候交
  • 应付账款 暂估
  • 预付款发票未到如何入成本
  • 个人所得税申报错误如何更正申报
  • 发票收款人和开票人
  • 一级建造师继续教育
  • 归还银行贷款怎么做分录
  • 企业的固定资产可以按照其价值和使用情况
  • 个税专项附加扣除是什么意思
  • 货物发出未开票
  • 老板垫付款做会计分录
  • 工程项目预缴增值税
  • win10专业版虚拟内存怎么设置
  • qq游戏怎么玩不了怎么回事
  • 出售固定资产账务处理
  • 火狐浏览器下载安装
  • 产品 研发
  • 公司强制要求转部门合法吗
  • win11安卓子系统教程
  • 刚毕业的学生可以买学生票吗
  • 送给经销商的祝福语
  • ipad哪款最贵
  • 爬虫10054
  • 学生兼职收入按什么交个税
  • 密歇根湖怎么读
  • 未按规定采取预防措施,导致发生严重突发事件的
  • Cusco Cathedral on the Plaza de Armas, Cusco, Peru (© sharptoyou/Shutterstock)
  • php无限级分类
  • Yii1.1中通过Sql查询进行的分页操作方法
  • 企业会计核算应当以权责发生制为基础
  • 交通费补贴与报销的区别
  • chrome os安装到u盘
  • 一个小柜的货代费用
  • 空白发票作废怎么剪角
  • 个体工商户开税户
  • python动态强类型语言
  • 减免税在借方如何结转
  • python对应位置相乘
  • 购买办公用品没有发票可以入账吗
  • 没有虚拟化iommu
  • 房地产开发公司注册资金要求
  • 现金日记账采用哪一种账簿的形式
  • 商贸公司经营范围可以写烟酒吗
  • 企业的借款利息费用,扣除标准是?
  • 发放工资时社保为什么计入其他应付款科目
  • 主营业务成本如何调整
  • 向法人借款凭证摘要怎么写
  • 以前年度损益调整结转到哪里
  • 出口货物退货需要交税吗
  • 没有发票的费用怎么做凭证
  • sqlserver高级语法
  • win8.1运行Java程序网页出现空白等问题如何解决
  • Windows Remote Shell(WinRM)使用介绍
  • winxp系统控制面板
  • scrfs.exe - scrfs是什么进程 有什么用
  • freelibrary 程序崩溃
  • Win8系统创建VPN虚拟网络连接的技巧
  • Windows7如何查看电脑配置
  • 如何灵活使用蒙恬
  • linux 多块硬盘虚拟成一块
  • node.js可以跨平台吗
  • jquery输入框改变事件
  • flask使用celery
  • js 对象key
  • javascript新手教程
  • 用javascript写简单网页
  • 青岛网上办税服务厅登录
  • 一般纳税人注销公司需要查账吗
  • 地税稽查局查账严重吗
  • 江西车辆购置税查询网
  • 文化事业建设费减免政策
  • 内蒙民生认证系统
  • 软件企业专项审计
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设