VSCode一個簡單的vue移動端適配方案

在index.HTML下用JS動態配置viewport

我這裡UI給的設計圖都是750px，所以750px / 15(份) = 50 rem

 (function(){        var pixRatio=1/window.devicePixelRatio;        document.write('<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale='+pixRatio+',minimun-scale='+pixRatio+',maximun-scale='+pixRatio+'" />');        var html=document.documentElement;        var hWidth=html.getBoundingClientRect().width;        html.style.fontSize=hWidth/15+'px';      })()複製程式碼

接著在VSCode安裝一個外掛用於轉換rem(cssrem)

這是外掛下載地址，也在可以VSCode擴充套件商店下載

https://marketplace.visualstudio.com/items?itemName=cipchk.cssrem

配置px轉rem的引數

Cssrem: Fixed Digits =>px轉換rem的需要保留的小數點

Cssrem: Root Font Size => px轉換為rem的基準 

             （也就是 750 / 15 = 50 <=> 設計圖 / 需要分成多少份 = 轉換rem的基準）

到這裡就配置好了，記得重啟一下編輯器

最後的效果就是