【vue:淘宝rem自适应 】

news2024/11/14 14:56:45

vue:淘宝rem自适应

1.安装lib-flexible:cnpm install lib-flexible --save

2.在main.js中引入:import 'lib-flexible/flexible.js’

在这里插入图片描述

3.配置flexible找到vue-cli路径node_modules/lib-flexible/flexible.js,然后修改rem换算单位在这里插入图片描述

4.配置px to rem插件:设置—找到Root Font Size 值为:设计稿宽度/份数(1920/24=80);在这里插入图片描述

5.把px----全部转成----rem(vsCode快捷键:alt+Z)

没有的先去安装插件
在这里插入图片描述

6.注意:如果以上操作没有效果,把下面一步执行

将vue项目下的public下的index.html文件里面的一行代码注释掉,否则lib-flexible可能不会起作用。
<meta name="viewport" content="width=device-width,initial-scale=1.0”>
因为lib-flexible会自动生成meta,所以可以将public/index.html中的删了,如果要使用媒体查询的话就不能删,媒体查询中的代码就会出现问题

最后,一通操作完成后,可以打开检查面板看到:html的font-size会随着屏幕缩放改变;在这里插入图片描述

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

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

相关文章

ThreadLocal-线程安全利器

原文链接&#xff1a;https://www.jylt.cc/#/detail?activityIndex2&id9df3fd62d6ee13ff555c30157798b092 ThreadLocal是什么 ThreadLocal用来提供线程内部的局部变量&#xff0c;是各个线程独有的&#xff0c;该变量无法被其他线程访问。主要有以下作用&#xff1a; 解…

pyqt5实现线程与弹窗功能

pyqt5实现线程与弹窗功能 效果图&#xff1a; 示例下载 点我下载 https://download.csdn.net/download/lm_is_dc/87982279 简介 Pyqt5线程使用 QThread, pyqtSignal, QMutex, QWaitCondition来实现&#xff0c;涉及到线程&#xff0c;锁&#xff0c;信号量&#xff0c;线程…

深入理解计算机系统(2)_计算机基本组成

深入理解计算机系统系列文章目录 第一章 计算机的基本组成 1. 内容概述 2. 计算机基本组成 第二章 计算机的指令和运算 第三章 处理器设计 第四章 存储器和IO系统 文章目录 深入理解计算机系统系列文章目录前言参考资料一、组成架构&#xff08;冯/图&#xff09;1. 组成架构2…

42. 接雨水

题目链接&#xff1a;力扣 解题思路&#xff1a;从左往右按列进行计算&#xff0c;依次计算每一列能够接到的雨水数量。对于当前列能够接到的雨水数量是由左右两边最高的两根柱子决定的&#xff0c;类似于木桶定律&#xff08;一只水桶能装多少水取决于它最短的那块木板&#x…

AI实践-定制你的专属简历-软件测试

简历对于找到一份理想的工作至关重要。但是&#xff0c;准备简历这一过程却让人感到头疼和繁琐&#xff0c;而且如何突出自己的优势&#xff0c;也是许多求职者遇到困惑。 chatgpt不会受到情感和个人喜好的影响&#xff0c;能够通过算法和数据分析为您编写最合适的简历。并且可…

目标检测算法-YOLOV5解析(附论文与源码)

目标检测算法-YOLOV5解析&#xff08;附论文与源码&#xff09;

数据结构 | 顺序二叉树

一、数据结构定义 1、顺序二叉树 /* 顺序二叉树 */ typedef char TreeType; typedef struct seqTree{int MAXNUM; // 最大元素个数int curNum; // 元素的个数TreeType nodelist[]; // 顺序二叉树节点存储 } *SeqTree; 本次代码中二叉树的结构如下图&#xff0c;用层次序列可…

【Python】字典

文章目录 一. 字典的创建二. 字典的操作1. 查找 key2. 新增键值对3. 删除键值对4. 遍历字典4.1 使用 for 循环遍历字典4.2 通过方法遍历字典keys() 获取到字典中所有 keyvalues() 获取到字典中的所以 valueitems 获取到字典中的所有键值对 三. 理解字典操作的效率 一. 字典的创…

Linux--打印文件内容:cat

cat是cater的简写 语法&#xff1a; cat [选项] [文件] 常用选项&#xff1a; -b 对非空输出行编号 -n 对输出的所有行编号 -s 不输出多行空行 示例&#xff1a; ①打印文件hello.c的内容 ②带行号打印文件hello.c的内容 ③输入什么&#xff0c;打印什么 ④输入重定向&…

讲座笔记:如何撰写高质量科技论文

1 论文总体思路 2 摘要 3 Intro 常见Introduction逻辑&#xff1a; 说明问题是什么&#xff1b;简单罗列前人工作&#xff1b;描述我们的工作。 说明问题是什么&#xff1b;目前最好的工作面临什么挑战&#xff1b;我们的方法能缓解上述挑战 3.1 段落写法 首先列出几句话 …

【 Linux】文件删除原理

文章目录 Linux文件删除原理文件的索引节点和链接文件删除的过程文件删除后是否能恢复 Linux文件删除原理 Linux是一个强大的操作系统&#xff0c;它提供了许多命令和工具来管理文件和目录。其中&#xff0c;最常用的命令之一就是rm&#xff0c;它可以用来删除不需要的文件或目…

Less简明教程

一.概述 Less是一种动态样式语言&#xff0c;它在CSS的基础上扩展了混合、嵌套、变量等实用功能。Less也是一种CSS预处理语言&#xff0c;less文件在经过less.js处理后&#xff0c;最终会生成.css文件&#xff0c;如下图所示&#xff1a; 1.动态样式语言的比较 动态样式语言主…

git push报错rejected:no-fast-forward

报错&#xff1a; 报错关键词&#xff1a; non-fast-forwardyour current branch is behindthe remote changes 即&#xff1a;不能快速前进、当前分支滞后、远端改变 原因&#xff1a; 这个分支下&#xff0c;别人提交了一些代码到远程仓库。对于这个改变&#xff0c;你没有…

SpringBoot+微信小程序在线订餐小程序系统 附带详细运行指导视频

文章目录 一、项目演示二、项目介绍三、运行截图四、主要代码 一、项目演示 项目演示地址&#xff1a; 视频地址 二、项目介绍 项目描述&#xff1a;这是一个基于SpringBoot微信小程序框架开发的在线订餐小程序系统。首先&#xff0c;这是一个前后端分离的项目&#xff0c;代…

什么是 Kubernetes 服务器端应用 (SSA)?

自 2021 年 8 月 v1.22 版本发布以来,服务器端应用 (SSA) 已在 Kubernetes 中普遍可用。这是一种声明式资源管理策略,可通过将命令逻辑移至kubectl apply服务器来改进 diff 计算并警告合并冲突。 本文将解释 SSA 的工作原理以及为什么它比以前的客户端应用 (CSA) 方法更受青…

Python3 面向对象 | 菜鸟教程(十六)

目录 一、面向对象技术简介 &#xff08;一&#xff09;类(Class) &#xff08;二&#xff09;方法 &#xff08;三&#xff09;类变量 &#xff08;四&#xff09;数据成员 &#xff08;五&#xff09;方法重写 &#xff08;六&#xff09;局部变量 &#xff08;七&am…

并发-抽象队列同步器AQS应用Lock详解

锁的膨胀是指synchronized原本是无锁态&#xff0c;当有一个线程调用时变为偏向锁&#xff0c;当有多个线程排队自旋等待锁时会升级为轻量锁&#xff0c;当线程等待时间太长时会升级为重量级锁&#xff0c;这就是锁的膨胀过程&#xff0c;且是不可逆的。 锁的粗化是指如果在一个…

【总结】1727- 前端开发中如何高效地模拟数据?

&#x1f449; 「文章推荐」 详细聊一聊 Vue3 动态组件深入浅出 Vue3 自定义指令6 个你必须明白 Vue3 的 ref 和 reactive 问题初中级前端必须掌握的 10 个 Vue 优化技巧分享 15 个 Vue3 全家桶开发的避坑经验 在开发和测试工作中&#xff0c;mock 数据非常实用。mock 数据是指…

基于值的深度强化学习算法

目录 DQN2013 —— Playing Atari with Deep Reinforcement LearningDQN2015 —— Human-level control through deep reinforcement learning引用文献 DQN2013 —— Playing Atari with Deep Reinforcement Learning 论文下载地址 论文介绍 该论文提出了一个基于卷积神经网络…

数字IC验证环境的创建

本文介绍了从一组可重用的验证组件中构建测试平台所需的步骤。UVM促进了重用&#xff0c;加速了测试平台构建的过程。 首先对测试平台集成者&#xff08;testbench integrator&#xff09;和测试编写者&#xff08;test writer &#xff09;进行区分&#xff0c;前者负责测试平…