We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
亲测,对于vue3.x来说,适配最好
vw 与 vh单位,以viewport为基准,1vw 与 1vh分别为window.innerWidth 与 window.innerHeight的百分之一。
安装 命令行输入:
yarn add postcss-px-to-viewport
或
npm i postcss-px-to-viewport -save -dev
配置 package.json中,在postcss中添加代码:
"postcss": { "plugins": { "autoprefixer": {}, "postcss-px-to-viewport": { "viewportWidth": 750, "minPixelValue": 1 } } },
配置项:
"viewportWidth": 750, // 设计稿的宽度 "unitPrecision": 3, // px转成vw、vh后小数点保留的位数 "minPixelValue": 1, // 不转化为vw的最小px值
使用场景 vw与vh会在pc与移动端均产生效果,而不像flexible只会转换一定宽度(记得是750px)以下设备的px为rem,因此若设计稿为移动端而生,全权使用vw单位会使得页面在pc端出现字体过大等现象,需酌情处理,根据应用场景自行选择
兼容性 vw/vh 单位其实出现比较早了,只是以前支持性不太好,现在随着浏览器的发展,大部分(92%以上)的浏览器已经支持了vw/vh,
The text was updated successfully, but these errors were encountered:
No branches or pull requests
亲测,对于vue3.x来说,适配最好
vw 与 vh单位,以viewport为基准,1vw 与 1vh分别为window.innerWidth 与 window.innerHeight的百分之一。
安装
命令行输入:
或
配置
package.json中,在postcss中添加代码:
配置项:
使用场景
vw与vh会在pc与移动端均产生效果,而不像flexible只会转换一定宽度(记得是750px)以下设备的px为rem,因此若设计稿为移动端而生,全权使用vw单位会使得页面在pc端出现字体过大等现象,需酌情处理,根据应用场景自行选择
兼容性
vw/vh 单位其实出现比较早了,只是以前支持性不太好,现在随着浏览器的发展,大部分(92%以上)的浏览器已经支持了vw/vh,
The text was updated successfully, but these errors were encountered: