vue3+vite项目移动端适配：postcss-pxtorem和amfe-flexible
创始人
2024-06-02 18:40:31
0次

一，定义

postcss-pxtorem

PostCSS 的一个插件，可以从像素单位生成 rem 单位。

amfe-flexible

amfe-flexible是配置可伸缩布局方案，主要是将1rem设为viewWidth/10。

二，使用

1. 设置 viewport

在 index.html 中：

2.安装插件

npm install amfe-flexible --save
npm install postcss-pxtorem --save

3.配置文件

Vite自身已经集成PostCSS，因此无需单独创建PostCSS配置文件，可直接在 vite.config.js 文件中配置css.postcss选项。

import postCssPxToRem from "postcss-pxtorem";
export default defineConfig({plugins: [vue()],css: {postcss: {plugins: [postCssPxToRem({rootValue: 75, // 1rem，根据 设计稿宽度/10 进行设置propList: ['*'], // 需要转换的属性，这里选择全部都进行转换})]}},
})

4. 导入

在 main.js 中引入 amfe-flexible 插件：

import 'amfe-flexible';

三，安装后效果如图：

 

 

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：Servlet学习

下一篇：【C++初阶】3. 类和对象_2

相关内容

热门资讯

安卓系统法语字体包,多样性与美... 你知道吗？在安卓手机上装个法语字体包，瞬间感觉自己的手机都洋气了不少呢！想象那些优雅的法语单词在你的...
盗版苹果耳机安卓系统,揭秘盗版... 你有没有发现，最近市面上出现了一种特别火的“盗版苹果耳机”，竟然还能适配安卓系统？这可真是让人眼前一...
安卓系统推送怎么关,一键操作指... 手机里的推送消息是不是让你烦得要命？有时候，那些来自各种应用的推送，就像是不请自来的小喇叭，总是在你...
华为安卓系统迟钝 卡,华为安卓... 亲爱的手机控们，你们是不是也和我一样，对华为安卓系统的迟钝和卡顿问题头疼不已呢？别急，今天我就来给你...
安卓手机系统更新太慢,用户期待... 亲爱的手机控们，你们有没有遇到过这样的烦恼：每次更新安卓手机系统，那速度简直比蜗牛爬还要慢，让人等得...
d525 安卓系统,功能亮点与... 你有没有想过，一台小小的工控主板，竟然能玩转安卓系统？没错，今天就要给你揭秘这款神奇的d525工控主...
安卓系统键盘语言切换,Andr... 你有没有发现，手机里的键盘有时候就像个调皮的小精灵，一会儿让你输入中文，一会儿又跳到英文模式，真是让...
优化安卓系统如何设置,提升性能... 亲爱的手机控们，是不是觉得你的安卓手机最近有点儿“懒洋洋”的，反应慢了，卡顿了？别急，今天就来给你支...
win下安装安卓系统,双系统体... 亲爱的电脑迷们，你是否曾幻想过，在你的Windows电脑上也能畅玩那些让你爱不释手的安卓应用？别再羡...
安卓系统如何录像手机,轻松掌握... 你是不是也和我一样，有时候想记录下手机上的精彩瞬间或者游戏操作呢？别急，今天就来教你怎么在安卓手机上...
安卓系统直接安装软件,畅享便捷... 你有没有发现，安卓手机里的软件真是五花八门，应有尽有？想要在手机上安装一款心仪的软件，其实超级简单，...
安卓系统闹铃不响,安卓手机闹钟... 亲爱的手机用户们，你是否有过这样的经历：明明设置了闹钟，结果闹钟却像个“哑巴”一样，一声不吭？别急，...
安卓系统的全球潮汐,全球海洋潮... 你有没有想过，每次出海或者去海边玩耍，都能像超人一样，提前预知潮汐的变化，那该多酷啊！现在，有了安卓...
葫芦侠toot安卓系统,探索创... 你知道吗？最近在安卓系统圈子里，有个小家伙引起了不小的轰动，它就是葫芦侠toot安卓系统。这可不是一...
微软苏菲3安卓系统,引领智能设... 哇塞，你有没有听说？微软苏菲3平板电脑竟然要搭载安卓系统啦！这可不是什么小道消息，而是实实在在的科技...
苹果拼多多安卓系统,三巨头在智... 你有没有想过，手机的世界就像是个大杂烩，各种操作系统争奇斗艳，让人眼花缭乱。今天，咱们就来聊聊苹果、...
wps安卓版适合系统,随时随地... 手机里的办公软件是不是让你头疼？别急，今天就来给你揭秘WPS安卓版，看看这款办公神器到底适不适合你的...
手机安卓系统怎么打字,安卓系统... 手机这玩意儿，现在可是咱们生活中不可或缺的好伙伴啦！不管是聊天、刷剧还是工作，手机都能轻松搞定。但说...
2.3安卓系统车机,功能丰富、... 你有没有想过，你的车机系统其实就像是一辆老式自行车，虽然能骑，但总觉得少了点什么？别急，今天就来给你...
制作安卓镜像系统教程,Andr... 亲爱的技术爱好者们，你是否曾梦想过亲手打造一个属于自己的安卓镜像系统？别再羡慕那些技术大牛了，今天，...