第三步:删除项目中的node_modules,重新yarn一下拉取依赖文件。 第四步:在.postcssrc.js中配置横屏参数。 module.exports={plugins:{"postcss-import":{},"postcss-url":{},"postcss-aspect-ratio-mini":{},"postcss-cssnext":{},"postcss-px-to-viewport":{viewportWidth:375,viewportHeight:667,unitPrecis...
postcss-px-to-viewport是一款很优秀的插件,将px单位转换为视口单位的 (vw, vh, vmin, vmax) 的PostCSS插件。 在vite构建的项目中,开发过程中,有个临时需求:将移动端页面适配到横屏的自助机上。 vite中内置了postcss,引入插件如下: css:{postcss:{plugins: [ require('autoprefixer'), require('postcss-px-t...
postcss-px-to-viewport是一个插件,用起来非常方便,安装一下插件,搞个配置文件就可以直接用了。 2、postcss-px-to-viewport适配的原理 根据配置将css样式中的px转为vw,从而让页面自适应当前屏幕大小。 3、postcss-px-to-viewport适配使用 (1)安装 1 npm install postcss-px-to-viewport (2)在目录下新建一个配...
viewportWidth: 375, // 视窗的宽度,对应的是我们设计稿的宽度 viewportHeight: 1334,//视窗的高度,根据375设备的宽度来指定,一般指定667,也可以不配置 unitPrecision: 13, // 指定`px`转换为视窗单位值的小数位数(很多时候无法整除) propList: ['*'], // 能转化为vw的属性列表 viewportUnit: 'vw', // ...
第二种方案是viewport,postcss-px-to-viewport就是这样一款优秀的插件,它解决了以上提到的痛点,也满足以上提到的理想要求。它将px转换成视口单位vw,众所周知,vw本质上还是一种百分比单位,100vw即等于100%,即window.innerWidth ...
// (Number) 横屏时使用的视口宽度 landscapeWidth: 568 提示: 当前版本v1.1.1长期未更新,include在vue3项目中实测不生效。不设置或者将其设置成include: undefined 如果控制台报以下错误: 可以通过将 postcss-px-to-viewport 换成 postcss-px-to-viewport-8-plugin 解决,配置文件: ...
postcss-px-to-viewport,可以将px单位自动转换成viewport单位(vw表示屏幕的1%) 使用npm安装 npm i postcss-px-to-viewport --save-dev vue-cli2 比较特殊 ,需要在 .postcssrc.js 中配置,没有则需要新建文件 module.exports = { "plugins": { // "postcss-import": {},s ...
postcss-px-to-viewport 一种屏幕适配方案 将 px 单位转换为视口单位的 (vw, vh, vmin, vmax) 的 PostCSS 插件 GitHub 地址 简介 如果你的样式需要做根据视口大小来调整宽度,这个脚本可以将你 CSS 中的 px 单位转化为 vw,1vw 等于 1/100 视口宽度。
postcss-px-to-viewport 是一个 PostCSS 插件,它可以将 CSS 中的 px 单位转换为视口单位(如 vw、vh、vmin、vmax),从而实现响应式设计。下面是对 postcss-px-to-viewport 配置的详细解答: 1. 安装插件你可以使用 npm 或 yarn 来安装 postcss-px-to-viewport ...
我不建议用 vw 做自适应，px+ flex多好，大屏幕上能看到更多内容，而不是更大的内容。