推薦使用postcss插件，它會自動將項目所有的px單位統一轉換為vw等單位（包括npm安裝的第三方組件），從而實現適配，具體配置規則可參考官網或npm網站介紹。
另外對于大屏的適配，需要縮放網頁，可使用autojs，參考https://blog.csdn.net/m0_71231013/article/details/131650562 。但它只能放大或縮小頁面（適合做大屏項目使用），不能讓頁面字體、div寬高等自動依據屏幕分辨率適配。
我的vue3項目使用postcss，首先在devDependencies安裝了以下包：
"postcss": "^8.4.38",
"postcss-import": "^16.1.0",
"postcss-loader": "^8.1.1",
"postcss-px-to-viewport": "^1.1.1",
"postcss-px-to-viewport-opt": "^0.0.4",
隨后，參考官網和一些參考資料，在項目根目錄（和package.json平級）新建配置文件postcss.config.js，內容如下：
export default {plugins: {'autoprefixer': {path: ['./src/*']},'postcss-import': {},'postcss-px-to-viewport-opt': {'viewportWidth': '1707', // 我的視窗寬度'viewportHeight': '791', // 我的視窗高度'unitPrecision': 5, // 指定`px`轉換為視窗單位值的小數位數(很多時候無法整除)'viewportUnit': 'vw', // 指定需要轉換成的視窗單位，建議使用vw'selectorBlackList': ['#nprogress'], // 指定不轉換為視窗單位的類'minPixelValue': 3, // 小于或等于`1px`不轉換為視窗單位'mediaQuery': false, // 允許在媒體查詢中轉換`px`// 'exclude': /(\/|\\)(node_modules)(\/|\\)/, // 可以自定義規則哪些文件不要轉換，例如這句讓包里的不會轉換，但通常無需配置}}
}
最后，如果使用了element-plus的el-message組件，它不能被postcss自動轉換，需要自己在項目根目錄的index.html的head配置：
<head><meta charset="UTF-8" /><!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> --><link rel="icon" type="image" href="/AI.png" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>標題</title><style>.el-message {font-size: 16px;}</style>
</head>
這樣就配置完成了！無論是在瀏覽器隨意縮放，或者換不同的瀏覽器查看，網頁都能完美適配！
我總結出寫項目應遵循以下適配規則：
-
在App.vue頁面設置全局的字體顏色、字體大小作為項目默認，避免意外情況，讓頁面寬100vw，高100vh
-
font-size等單位不要用large、medium等沒有明確單位的寫法！！！全部禁用px單位，特別是1px、2px這種無法被postcss轉換的微小長度！統一用vw、vh或者百分比；
-
記得電腦系統、瀏覽器調成深色模式，觀察網站是否會有文字變白等異常現象并修復；
-
可以將網頁用瀏覽器的手機顯示模式，調整網頁大小，例如1920×1080，觀察不同大小模式網頁是否適配；將網頁進行縮放，觀察不同縮放倍率下，是否出現不適配問題。
-
完成適配具體做法：安裝postcss，項目根目錄新建配置文件postcss.config.js，記得別用exclude排除node_modules，否則postcss無法將包里的px樣式也一起轉為vw；對于el-message組件，單獨在項目的index.html文件的style里，設置 .el-message { font-size: 16px;}，即可保證el-message組件顯示正常。
![[ios-h5]在ios系統瀏覽器中輸入框得到焦點時頁面自動放大](http://pic.xiahunao.cn/[ios-h5]在ios系統瀏覽器中輸入框得到焦點時頁面自動放大)
