在上述示例中,.responsive-box的width和height属性会被postcss-px-to-viewport-8-plugin自动转换为视口单位,以适应不同屏幕尺寸的响应式设计。 通过以上步骤,你可以在Vue3项目中成功集成和使用postcss-px-to-viewport-8-plugin,从而实现响应式设计。
第三步、安装postcss-px-to-viewport-8-plus cnpm install postcss-px-to-viewport-8-plugin --save // 测试不支持配置include 支持配置include cnpm install postcss-px-to-viewport-8-with-include -S // 亲测可用 第四步、配置vite.config.ts文件 ... import postcsspxtoviewport from 'postcss-px-to-vi...
接下来使用vue搭建项目,采用postcss-px-to-viewport-8-plugin实现px自动转换vw插件 在项目中安装 npm install postcss-px-to-viewport-8-plugin -S 在项目根目录新建一个postcss.config.js文件 module.exports= {plugins: {autoprefixer: {overrideBrowserslist: ['Android 4.1','iOS 7.1','Chrome > 31','ff >...
npm i postcss-px-to-viewport-8-plugin -D 新建一个单位转换的配置位置pxChangeVh.js // 引入单位插件importpptvfrom'postcss-px-to-viewport-8-plugin'// 配置信息constloder_pxtovw =pptv({unitToConvert:'px',// 默认值`px`,需要转换的单位viewportWidth:1536,// 视窗的宽度,对应设计稿宽度viewportHeight...
2.Viewport 布局 postcss-px-to-viewport-8-plugin:postcss-px-to-viewport-8-plugin 是一款 PostCSS 插件,用于将 px 单位转化为 vw/vh 单位。 1 yarn add postcss-px-to-viewport-8-plugin -D vite.config.ts中更改配置 //vite.config.tsimport pxtovw from'postcss-px-to-viewport-8-plugin'const loder...
虽然postcss-px-to-viewport-8-plugin做适配,但是行内样式不能转换为vw,需要额外做处理 自定义写个vite插件处理行内样式 or 不做处理 尽量不写行内样式便于统一维护css代码是合理之道 ::: 安装pinia & pinia 数据持久化 安装pinia 并且配置 pinia 和 pinia 数据持久化,在src下新建 store 文件夹 ...
一般移动端适配,使用 rem布局 或 Viewport (vw/vh),这里我们选择 vw/vh 布局,这样可以根据屏幕大小自适应,适配更多机型 现代手机都支持这些布局方式了(都vue3了该摈弃的就摈弃吧) 这里咱们借助postcss-px-to-viewport-8-plugin该插件可以将px单位转换为vw单位(自动转换为vw单位),以达到移动端适配的目的 ...
五、集成postcss 安装依赖 yarn add postcss-px-to-viewport-8-plugin --dev 1.修改nuxt.config.ts export default defineNuxtConfig({ ... postcss: { plugins: { "postcss-px-to-viewport-8-plugin": { viewportWidth: 375, // 视窗的宽度,对应的是我们设计稿的宽度 viewportHeight: 912, // 视窗的...
// require('postcss-px-to-viewport-8-plugin')({ // viewportWidth: 1980, // 视窗的宽度,对应设计稿的宽度 // viewportHeight: 5000, // 视窗的高度,对应设计稿的高度 // unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数 // viewportUnit: 'vw', // 指定需要转换成的视窗单位,建议使用...
module.exports = { plugins: { // 'postcss-px-to-viewport-8-plugin': { // // (String) 需要转换的单位,默认为"px" // unitToConvert: 'px', // // (Number) 设计稿的视口宽度 // viewportWidth: 375, // // (Number) 单位转换后保留的精度 // unitPrecision: 5, // /** // * (Ar...