语言 网站开发,hao123网址导航官网,中国空间站最新消息新闻,上海企业体检一#xff0c;定义
postcss-pxtorem PostCSS 的一个插件#xff0c;可以从像素单位生成 rem 单位。 amfe-flexible amfe-flexible是配置可伸缩布局方案#xff0c;主要是将1rem设为viewWidth/10。 二#xff0c;使用
1. 设置 viewport
在 index.html 中#xff1a;
定义
postcss-pxtorem PostCSS 的一个插件可以从像素单位生成 rem 单位。 amfe-flexible amfe-flexible是配置可伸缩布局方案主要是将1rem设为viewWidth/10。 二使用
1. 设置 viewport
在 index.html 中
meta nameviewport contentwidthdevice-width, initial-scale1, maximum-scale1, minimum-scale1, user-scalableno2.安装插件 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;
三安装后效果如图
