vite创建的项目使用rem适配

在这里插入图片描述

下面以创建vue3.0 项目为例:

npm init vite@latest “名称”

选择vue (选择你所对应的语言)
更具提示步骤执行

cd xxx
npm i
npm run dev

然后再项目中使用 rem 需要安装插件

第一步安装插件

npm i amfe-flexible

npm i postcss-pxtorem

第二步配置 postcss.config.js
在package.json 同层级 创建postcss.config.js

export default {plugins: {'postcss-pxtorem': {rootValue: 37.5, //根据设计稿的基准尺寸设置。一般是iphone6的375*667为基准或者2倍尺寸propList: ['*']}}
}

使用方法

以上步骤具备以后 在main.js 中引入

import ‘amfe-flexible’

安装编辑器vscode 拓展插件
在这里插入图片描述

它的功能就是辅助将100px 变成相同大小的rem单位

在这里插入图片描述

效果如下

在这里插入图片描述

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

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

相关文章

没有公网ip,如何实现外网访问内网?

目前拨号上网是最广泛的上网方式,这种方式优点是价格便宜,缺点是没有固定公网ip,每次重新您拨号ip地址都会变。如果有一台服务器,需要实现外网访问,在没有固定公网ip的环境下,该如何实现呢?使用…

【JavaSE】/*初识Java*/

目录 一、了解 Java 语言 二、Java 语言的重要性 2.1 使用程度 2.2 工作领域 三、Java 语言的特性 四、Java 的基础语法 五、可能遇到的错误 六、第一个 java 程序代码解析 七、Java 注释 八、Java 标识符 九、Java 关键字 一、了解 Java 语言 Java 是由 Sun Micr…

LeetCode题练习与总结:反转链表Ⅱ--92

一、题目描述 给你单链表的头指针 head 和两个整数 left 和 right &#xff0c;其中 left < right 。请你反转从位置 left 到位置 right 的链表节点&#xff0c;返回 反转后的链表 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], left 2, right 4 输出&#…

Java入门基础学习笔记15——强制类型转换

大范围类型的变量是否可以赋值给小范围类型的变量呢&#xff1f; IDEA直接报错。直接报错&#xff0c;是提醒你有问题。但是我非常进行类型转换。 非要强行赋值呢&#xff1f; 强制类型转换&#xff0c;强行将类型范围大的变量&#xff0c;数据赋值给类型范围小的变量。 数据…

简单的Python HTML 输出

1、问题背景 一名初学者在尝试将 Python 脚本输出到网页上时遇到了一些问题。他当前使用 Python 和 HTML 进行开发&#xff0c;并且遇到了以下问题&#xff1a; 担心自己的代码过于复杂&#xff0c;尤其是 WebOutput() 函数。希望通过 JavaScript 使用 HTML 模板文件更新数据。…

前端开发指导

前端开发指导 本文介绍了配置前端开发环境需要的软件、配置项等,指导如何开始进行UDM部门前端开发的全流程。本文以Windows系统下在Microsoft Virtual Studio Code中开发为基础。 一、综述 目标:零基础或者新员工依照此文档,能够完成开发环境的搭建及熟悉测试环境的搭建。…

【数据结构】顺序表(一)

✨✨✨专栏&#xff1a;数据结构 &#x1f9d1;‍&#x1f393;个人主页&#xff1a;SWsunlight 不怕别人看不起&#xff0c;就怕自己不争气。路是人走出来的&#xff0c;关键要靠自己闯。振作起来&#xff0c;生活的含义就是前进。 目录 一、顺序表的概念&#xff1a; 二…

基于Laravel 10 + Vue(scui) + MySQL的快速开发的后台管理系统

​ 系统介绍 ​基于Laravel 10 Vue(scui) MySQL的快速开发的后台管理系统 版权申明 禁止将本产品用于含诈骗、赌博、色情、木马、病毒等违法违规业务使用。 代码仓库 gitee地址&#xff1a; 基础版本 内置模块 用户管理&#xff1a;用于维护管理系统的用户&#xff0c…

css案例 tab上下滚动,左右滚动

效果图&#xff1a; 完整代码&#xff1a; <template><view class"content"><view class"content-item"><view class"content-title"><h4>美食热搜</h4><ul><li>火鸡面</li><li>糖…

武汉星起航:掌握亚马逊关键节日,抢占销售制高点

在电子商务的浪潮中&#xff0c;亚马逊平台以其卓越的服务和庞大的用户基础&#xff0c;成为全球卖家争相入驻的热门选择。对于卖家而言&#xff0c;了解并掌握亚马逊的各大促销节日&#xff0c;无疑是提升销售业绩、扩大品牌影响力的重要一环。武汉星起航在这里将详细解析亚马…

大模型面试常考知识点1

文章目录 1. 写出Multi-Head Attention2. Pre-Norm vs Post-Norm3. Layer NormRMS NormBatch Norm 4. SwiGLU从ReLU到SwishSwiGLU 5. AdamW6. 位置编码Transformer位置编码RoPEALibi 7. LoRA初始化 参考文献 1. 写出Multi-Head Attention import torch import torch.nn as nn …

CLion 写 Rust 报Project directory `/Users/.../rsheets` does not exist.

每次打开CLion都会看到像下面这样的报错&#xff0c;Project directory /Users/.../rsheets does not exist.&#xff0c;虽然不会影响你写代码&#xff0c;但每次看到还是不舒服&#xff0c;所以研究一下怎么解决。 原因是这样的&#xff0c;每当我们创建一个 Cargo 项目&…