移動端開發布局自適應寬度相容問題的個人整理

以下內容均以vue專案為基礎，本人只會vue…

一、最開始使用的移動端相容方式，是用裝置寬度除以7.5得到值用來設定根html字型大小，因為我們設計稿都是標準的750寬度，所以基本跟字型即是100px，然後編寫單位時，只需要使用對應的100px = 1rem的方式去寫。核心基本就是這樣

const w = document.documentelement.clientwidth || document.body.clientwidth;
document.
queryselector
('html'
).style.fontsize = w/
7.5+
'px'
;

二、lib-flexible+postcss-pxtorem外掛程式。後來在寫乙個專案的時候，就使用了這個外掛程式+vant元件，但是由於vant元件的設計稿是以375的寫的，導致我寫寬度的時候每次需要把專案設計稿的單位都要在心裡默算除個2，雖然不算很麻煩，但是其實也挺煩人的。

在.postcssrc.js中的配置如下

module.exports =
,'postcss-pxtorem':}
}

三、最近也是感覺當前最好用的適配方式。postcss-px-to-viewport外掛程式，由於現在對viewport的支援度提公升，這種方式無疑成為了最好的選擇。畢竟前面的方式都是用字型單位來布局，這種方式總歸是不太合適的。

上面的方案都是將px通過手動或自動的方式轉換成對應rem單位。而這個方案則是將px轉換成裝置的vw、vh單位。（不會吧，不會吧，都2023年了，不會還有人不知道100vw = document.documentelement.clientwidth吧？）

所以在此也強烈建議各位使用這套方案

安裝：

npm i postcss-px-to-viewport -

d

在.postcssrc.js中的配置如下：

module.
exports=(
)=>
,// 用來給不同的瀏覽器自動新增相應字首，如-webkit-，-moz-等等
"postcss-px-to-viewport":}
}}

外掛程式中文文件傳送門位址

因為我依然還是使用的vant元件（依然覺得vant香~~~）