Vite使用vw适配方案

一、环境

使用Vite脚手架搭建React项目，同样适用于Vue项目
npm create vite@latest vite_react_app --template react
npm i postcss-px-to-viewport
包括三方的UI库，比如antd的单位也会转成vw
只能转换css文件内的px单位，比如行内样式以及css-js类的样式，都不会生效

二、配置

import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import postcsspxtoviewport from "postcss-px-to-viewport"// https://vitejs.dev/config/
export default defineConfig({plugins: [react()],css: {postcss: {plugins: [postcsspxtoviewport({unitToConvert: "px", // 要转化的单位viewportWidth: 720, // UI设计稿的宽度unitPrecision: 3, // 转换后的精度，即小数点位数propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vwfontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vwselectorBlackList: [], // 指定不转换为视窗单位的类名，minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认falsereplace: true, // 是否转换后直接更换属性值// exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配exclude: [],landscape: false, // 是否处理横屏情况}),],},},
})

Vite使用vw适配方案相关推荐

VW适配方案后造成伪类使用content报错的解决办法 already has a 'content' property, give up to overwrite it.
配置.postcssrc.js的postcss-viewport-units: 'postcss-viewport-units': {filterRule: rule => rule.selec ...
vw 前端_前端适配之vw兼容方案（Vue版）
前端适配可以说是前端工程师一个永恒的话题,而解决方案也是层出不穷,其目的都是为了在各个分辨率中最大程度还原设计稿.今天给大家介绍的是vw兼容方案,其原理就是根据视口宽度自动计算页面上的尺寸,无论高度. ...
小小Mac:Web移动端适配方案
一.前言在过去的几年时间里,移动端web野蛮生长,智能机的Android阵营和IOS阵营分庭抗礼,随之产生了多个系统版本(系统版本多样);五花八门的屏幕尺寸.屏幕展示技术(如大名鼎鼎的Retina技 ...
Web移动端最强适配方案总结，没想到这么好用！
点击上方的终端研发部,右上角选择"设为星标" 一.前言在过去的几年时间里,移动端web野蛮生长,智能机的Android阵营和IOS阵营分庭抗礼,随之产生了多个系统版本(系统版本多 ...
CSS移动端适配方案
文章目录移动端适配移动端适配介绍视口的介绍布局视口和视觉视口理想视口移动端适配方案 rem适配方案基本介绍单位换算 vw适配方案移动端适配移动端适配介绍移动互联网的快速发展,让人 ...
H5移动端适配方案rem/vw
前言在讲解适配方案之前,我们聊聊为什么要做适配? 因为视口.逻辑像素.分辨率这些变量的不同,在每个设备展示都不一样,需要一种方案来统一. 物理像素:也就是分辨率,一个物理像素是显示器上的最小的物理显 ...
超详细的rem+vw移动端屏幕适配方案
在说具体内容之前,我们必须了解几个概念,就是:Retina屏.物理像素.设备独立像素.设备像素比在CSS中我们一般使用px作为单位,需要注意的是,CSS样式里面的px和物理像素并不是相等的.CSS中 ...
移动端适配方案(rem和vw vh适配)(css预处理器-less)
适配方案: 目前移动端适配方案有两种: 1.flex+rem单位当前市面上用的比较多相对主流(比如小米和淘宝移动端) 2.flex+viewport width/viewport height(v ...
React Native 开发豆瓣评分（五）屏幕适配方案
前言 React Native 是以实际像素 dp 为单位的,这导致在不同分辨率的屏幕会有不一样的显示情况. 在原生 Android 中,可以根据不同的分辨率添加不同的样式目录,以解决不同分辨率的问题 ...

Vite使用vw适配方案

一、环境

二、配置

Vite使用vw适配方案相关推荐

最新文章

热门文章