postcss-px-to-viewport-8-plugin 是一个PostCSS插件,用于将以像素为单位的样式转换为视口单位(如vw、vh)的样式,实现移动端适配。 适配步骤 1、安装 npm install postcss-px-to-viewport-8-plugin --save-dev 2、在项目中的创建postcss.config.js 文件 添加postcss-px-to-viewport-8-plugin 插件的配置,具体示...
postcss-px-to-viewport-8-plugin 是一个 PostCSS 插件,其主要功能是将 CSS 中以像素(px)为单位的样式转换为视口单位(如 vw、vh),以实现移动端的适配。这样可以确保元素在不同尺寸的屏幕上能够按比例缩放,从而提供更好的用户体验。 2. 安装步骤 要安装 postcss-px-to-viewport-8-plugin,你可以使用 npm 或 ...
import{defineConfig}from'vite';importpostcsspxtoviewport8pluginfrom'postcss-px-to-viewport-8-plugin';exportdefaultdefineConfig({css:{postcss:{plugins:[postcsspxtoviewport8plugin({unitToConvert:'px',viewportWidth:file=>{letnum=1920;if(file.indexOf('m_')!==-1){num=375;}returnnum;},unitPrecis...
@return calc(#{$px * 100vmin} / #{$padViewport}); } 然后写一个JS 实现同样的功能 获取设备类型,转换尺寸 import{useWindowSize}from'@vant/use'//vant获取屏幕尺寸,可自行替换import{ref,watch}from'vue'// phone 手机 pad 平板 设备类型exporttypeScreenTypeReutrn='phone'|'pad'// 此尺寸对应 pxT...
module.exports= {plugins: {'postcss-px-to-viewport-8-plugin': {unitToConvert:'px',// 需要转换的单位,默认为"px"viewportWidth:750,// 设计稿的视口宽度unitPrecision:5,// 单位转换后保留的精度propList: ['*','!font-size'],// 能转化为vw的属性列表,!font-size表示font-size后面的单位不会被...
postcsspxtoviewport({unitToConvert:'px',// 需要转换的单位,默认为"px"viewportWidth:1920,// 设计稿的视口宽度unitPrecision:5,// 单位转换后保留的精度propList:['*'],// 能转化为vw的属性列表viewportUnit:'vw',// 希望使用的视口单位fontViewportUnit:'vw',// 字体使用的视口单位selectorBlackList:[...
将px 单位转换为视口单位的 (vw, vh, vmin, vmax) 的 PostCSS 插件. 问题 使用postcss-px-to-viewport 控制台报以下代码 postcss-px-to-viewport: postcss.plugin was deprecated. Migration guide: https://evilmartians.com/chronicles/postcss-8-plugin-migration 解决 postcss-px-to-viewport 替换postcss-px-...
https://www.npmjs.com/package/postcss-px-to-viewport-8-plugin 2. 添加配置 以vite 项目为例,在 vite.config.ts 中 import postcsspxtoviewport8plugin from "postcss-px-to-viewport-8-plugin"; 1. defineConfig 中与 plugins 属性并列添加
同时使用 unocss 和 postcss 中 postcss-px-to-viewport-8-plugin 这个插件可能会遇到一个问题。就是使用 unocss 中px选择器如 w-[1200px] ,期望的是最终页面显示一个 width: 1200px 的元素,但是 postcss-px-to-viewport-8-plugin 插件会把 px 转换成 vw,一个vw相当于屏幕视口的 1%,如果你使用了老师...
npm install postcss-px-to-viewport-8-plugin -D 具体使用参考迁移指南npm仓库 https://www.npmjs.com/pa...