如何实现vue项目不同屏幕适配(2024最新)

文章目录

      • 1.下载插件,修改px单位为rem单位
      • 2.配置vue.config.js(如下图位置所示)
      • 3.屏幕自适应
      • 4.项目实际使用

1.下载插件,修改px单位为rem单位

在这里插入图片描述

 npm i postcss-plugin-px2rem

2.配置vue.config.js(如下图位置所示)

注意在根目录下,如果没有该文件就新建一个
在这里插入图片描述
以下代码供复制

module.exports = {css: {loaderOptions: {postcss: {plugins: [require('postcss-plugin-px2rem')({rootValue: 16, //换算基数, 默认100  ,这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。exclude: /(node_module)/,  //默认false,可以(reg)利用正则表达式排除某些文件夹的方法,例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem,请把此属性设为默认值mediaQuery: false,  //(布尔值)允许在媒体查询中转换px。minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0}),]}}},
}

3.屏幕自适应

1.src目录下新建utils文件夹,utils文件夹下新建flexible.js文件
在这里插入图片描述
flexible.js文件内拷贝以下代码

(function flexible(window, document) {var docEl = document.documentElementvar dpr = window.devicePixelRatio || 1// adjust body font sizefunction setBodyFontSize() {if (document.body) {document.body.style.fontSize = (12 * dpr) + 'px'}else {document.addEventListener('DOMContentLoaded', setBodyFontSize)}}setBodyFontSize();// set 1rem = viewWidth / 10 原版是10等分,这里把屏幕平均划分为24等分 1920function setRemUnit() {var rem = docEl.clientWidth / 24docEl.style.fontSize = rem + 'px'}setRemUnit()// reset rem unit on page resizewindow.addEventListener('resize', setRemUnit)window.addEventListener('pageshow', function (e) {if (e.persisted) {setRemUnit()}})// detect 0.5px supportsif (dpr >= 2) {var fakeBody = document.createElement('body')var testElement = document.createElement('div')testElement.style.border = '.5px solid transparent'fakeBody.appendChild(testElement)docEl.appendChild(fakeBody)if (testElement.offsetHeight === 1) {docEl.classList.add('hairlines')}docEl.removeChild(fakeBody)}}(window, document))

2.main.js入口文件引入该文件
在这里插入图片描述
3.下载px to rem(cssrem)插件进行适配
在这里插入图片描述
在这里插入图片描述

4.项目实际使用

注意使用单位要使用rem单位
在这里插入图片描述
实际效果:实现适配,进行浏览器页面缩放,div盒子高度跟随变化,实现成功
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/23380.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL深分页,limit 100000,10 优化

文章目录 一、limit深分页为什么会变慢二、优化方案2.1 通过子查询优化(覆盖索引)回顾B树结构覆盖索引把条件转移到主键索引树 2.2 INNER JOIN 延迟关联2.3 标签记录法(要求id是有序的)2.4 使用between...and... 我们日常做分页需…

浅谈人工智能在新型电力系统建设和电力行业中的应用和未来发展趋势

文章目录 概要应用场景分析未来趋势分析小结备注 概要 人工智能在新型电力系统建设和电力行业中具有广泛的应用和潜力。它可以大大提高电力系统的运行效率、可靠性和安全性,同时减少能源浪费和环境影响。 应用场景分析 能源预测和优化:人工智能可以通过…

引擎:UI

一、控件介绍 Button 按钮 创建一个按钮 按钮禁用 精灵模式 颜色模式 缩放模式 绑定点击事件 EditBox 输入框 Layout 布局 支持水平排列、垂直排列、背包排列 PageView 页面视图 ProgressBar 进度条 RichText 富文本 绑定点击事件 事件可以被其它标签包裹 图文混排 Scroll…

AG32 MCU+FPGA 使用感受

前言: 笔者35了,10多年前开始玩单片机/FPGA啥的,从现在回想过去,眼下真的是我们国家微电子发展的好时候。各种各样的国产单片机,FPGA啥的,想想本科的时候用的Freescale,后来用的STM32&#xff0…

13、数字中国建设整体布局规划

指导思想 《规划》强调,要坚持以新时代中国特色社会主义思想特别是网络强国的重要思想为指导,深入贯彻党的二十大精神,坚持稳中求进工作总基调,完整、准确、全面贯彻新发展理念,加快构建新发展格局,着力推动高质量发展,统筹发展和安全,强化系统观念和底线思维,加强整…

解决 ublox_f9p的 topic “/ublox_driver/receiver_lla“中无位置精度(P_std)的问题

一、背景 GNSS/INS组合导航是车辆导航等领域中常见的组合方式。ublox_f9p 设备因其优秀的性能被广泛关注,其可以直接发布 GNSS的高精度定位解,为GNSS/INS组合导航的实时定位提供极大的便利。其中 ubuntu环境下,ublox_f9p 设备的操作如下: 【1】Ubuntu18.04 下的安装,运行…

C 语言实例 - 字符串翻转

使用递归来翻转字符串。 实例 - 字符串翻转 #include <stdio.h> void reverseSentence();int main() {printf("输入一个字符串: ");reverseSentence();return 0; }void reverseSentence() {char c;scanf("%c", &c);if( c ! \n){reverseSentenc…

MQ基础(RabbitMQ)

通信 同步通信&#xff1a;就相当于打电话&#xff0c;双方交互是实时的。同一时刻&#xff0c;只能与一人交互。 异步通信&#xff1a;就相当于发短信&#xff0c;双方交互不是实时的。不需要立刻回应对方&#xff0c;可以多线程操作&#xff0c;跟不同人同时聊天。 RabbitM…

UI 自动化中的分层设计

以前的设计 在过去 UI 自动化测试领域有一个规范的设计模式是 page object 模式。 意思是测试用例不会直接定位页面元素&#xff0c; 而是把每一个页面封装成一个类。 在这个类中封装页面元素。 然后测试用例调用 page 类来操作页面元素完成测试用例。如下图&#xff1a; 以前…

【工具变量】巡回法庭DID数据(2000-2022)(附部分stata代码)

数据来源&#xff1a; 时间跨度&#xff1a;2000-2022 数据范围&#xff1a;全国 数据指标&#xff1a; 参考刘中华和黄斯琪等学者的做法&#xff0c;将当年企业总部所在省份被巡回法庭覆盖赋值为1&#xff0c;否则为0。数据提供两个版本excel版本和dta版本&#xff0c;还附…

【Emgu CV教程】10.14、ConnectedComponents()函数计算连通区域

文章目录 一、概念1.什么叫图像的连通区域2.提取连通区域的函数 二、简单应用1.原始素材2.代码3.运行结果4.连通区域上色 一、概念 1.什么叫图像的连通区域 图像的连通域是指图像中具有相同像素值并且位置相邻的像素组成的区域&#xff0c;连通域分析是指在图像中寻找出彼此互…

云工场上市在即:资产负债比率飙升,巨额分红3000万远超净利润

《港湾商业观察》施子夫 今年5月底&#xff0c;冲刺港交所上市的云工场科技控股有限公司&#xff08;以下简称&#xff0c;云工场&#xff09;通过聆讯。 6月5日&#xff0c;云工场宣布将于2024年6月5日至6月11日进行招股&#xff0c;预计在6月14日上市。公司计划发售1.15亿股…

MATLAB算法实战应用案例精讲-【数模应用】聚类分析(附MATLAB、python和R语言代码实现)

目录 几个高频面试题目 判别分析和聚类分析的区别 层次聚类和k-means聚类的对比 适用

MYSQL内存占用查询语句

可以通过以下 SQL 语句查询相关配置参数的当前值&#xff1a; InnoDB 缓冲池大小 (innodb_buffer_pool_size)&#xff1a; SHOW VARIABLES LIKE innodb_buffer_pool_size;最大连接数 (max_connections)&#xff1a; SHOW VARIABLES LIKE max_connections;临时表大小 (tmp_table…

【UE5.1 角色练习】11-坐骑——Part1(控制大象移动)

前言 在上一篇&#xff08;【UE5.1 角色练习】10-物体抬升、抛出技能 - part2&#xff09;基础上创建一个新的大象坐骑角色&#xff0c;并实现控制该角色行走的功能。 效果 步骤 1. 在商城中下载“African Animal Pack”资产和“ANIMAL VARIETY PACK”资产导入工程中 2. 复…

【deepin 邀您体验】玲珑 10 分钟快速构建指南!

玲珑 作为一种新型的独立包管理工具集&#xff0c;玲珑主要提供分层与隔离的运行环境&#xff0c;解决传统包管理系统强依赖导致的兼容性问题&#xff0c;以及权限松散导致的安全问题。当前&#xff0c;玲珑已支持 4 个发行版&#xff0c;包括 deepin、统信 UOS 以及 Debian 和…

golang 中的复合类型

前言 所有的api文档都可以使用bash命令 go doc 查看文档的帮助信息 从 Go 1.13 开始&#xff0c;godoc 不再随 Go 发行版一起安装&#xff0c;你需要单独安装它。 需要单独安装 1. go install golang.org/x/tools/cmd/godoclatest 2执行命令 godoc -http:1111 打开浏览器 http:…

MDK(μVsion3)问题总结及解决方法

问题 1&#xff1a;MDK 工具的 CARM 编译器&#xff1f; 我原来对 CARM 编译器比较熟悉&#xff0c;想用 CARM 编译器编译工程&#xff0c;但是却弹出一个不能执 行“cc”的错误&#xff0c;到 KEIL 网站查下才知道原因&#xff1a;由于 CARM 编译器是比较老的编译器&#xff0…

java之基础2笔记

1 类型转换 1.1 自动类型转换&#xff08;隐式类型转换&#xff09; 从小的数据类型到大的数据类型的转换&#xff08;如 int 到 long&#xff09;。 从低精度的数据类型到高精度的数据类型的转换&#xff08;如 float 到 double&#xff09;。 1.2 强制类型转换&#xff0…

什么是接地电阻柜呢?

接地电阻柜是一种用于保护电气设备和人身安全的设备&#xff0c;它可以有效地防止电气设备因接地故障而受到损害。 接地电阻柜的主要作用是将电气设备的接地电阻降低到安全范围内&#xff0c;以防止接地故障引起的火灾、爆炸等事故。接地电阻柜通常由接地电阻、接地母线、接地开…