基於vue-cli3的vue項目移動端樣式適配,lib-flexible和postcss-px2rem
1,安裝 flexible和 postcss-px2rem(命令行安裝)
npm install lib-flexible --save
npm install postcss-px2rem --save
簡要介紹這兩個包的用途:
flexible會為頁面根據屏幕自動添加<meta name=‘viewport‘ >標簽,動態控制initial-scale,maximum-scale,minimum-scale等屬性的值。
例如在Galaxy S III:
例如在iphone6/7/8:
postcss-px2rem會將px轉換為rem,rem單位用於適配不同寬度的屏幕,根據<html>標簽的font-size值來計算出結果,1rem=html標簽的font-size值。
2, 引入lib-flexible
在項目入口文件main.js 中引入lib-flexible
import ‘lib-flexible‘
註意事項(important): 由於flexible會動態給頁面header中添加<meta name=‘viewport‘ >標簽,所以務必請把目錄 public/index.html 中的這個標簽刪除!!!
3, 配置postcss-px2rem
vue-cli3 構建的項目相較於vue-cli2 構建的項目精簡了許多,將一些默認配置進行了更好更嚴密,讓開發變得更高效的封裝。具體請看vue-cli官網 https://cli.vuejs.org/zh/guide/
px2rem的配置放在vue-cli3 項目中vue.config.js中(找不到?可能你是一個新構建的項目,需要手動在項目根目錄創建vue.config.js)
具體配置內容如下:
1 module.exports = { 2 css: { 3 loaderOptions: { 4 css: {}, 5 postcss: { 6 plugins: [ 7 require(‘postcss-px2rem‘)({ 8 remUnit: 37.59 }) 10 ] 11 } 12 } 13 }, 14 }
OK,重啟項目,兩個用於移動端適配的包就這樣可以愉快的開始使用了!!!
下面來看我們的代碼,代碼中我們直接用px來寫寬高:
1 .testclass { 2 width: 300px; 3 height: 200px; 4 background: #e3e3e3; 5 }
在瀏覽器中會是什麽樣的呢?
沒錯,已經從px轉換成了rem。 what?如果你的沒有從px變成rem, 那麽你可能需要重啟一下項目呦~
溫馨提示: remUnit這個配置項的數值是多少呢??? 通常我們是根據設計圖來定這個值,原因很簡單,便於開發。假如設計圖給的寬度是750,我們通常就會把remUnit設置為75,這樣我們寫樣式時,可以直接按照設計圖標註的寬高來1:1還原開發。
那為什麽你在這裏寫成了37.5呢???那我們後面專門來講!
基於vue-cli3的vue項目移動端樣式適配,lib-flexible和postcss-px2rem