vue cli4實現自適應布局

webpack打包時，通過postcss-pxtorem外掛程式，將原先寫的px單位轉換成rem，然後通過amfe-flexible外掛程式監聽視窗變化，設定根元素得fontsize，實現自適應效果

cnpm i amfe-flexible -s // 需要打包進專案 -s

cnpm i postcss-pxtorem -d // 只需要本地使用 -d

在專案vue.config.js增加如下配置，沒有此檔案則在根目錄新建乙個即可

module.exports = ),

require("postcss-pxtorem")()]}
}}};

忽略轉換exclude正則匹配項。外掛程式會轉化所有的樣式的px。轉化第三方ui，例如iview（測試可行）

內聯樣式無法轉換

官網詳情配置

定義js檔案，計算根元素fontsize大小，完成後，在main.js引入該js檔案，與amfe-flexible相同

// basesize 要跟換算的基數一樣

let basesize = 100
function setfontsize () 
// 初始化
setfontsize()
// 監聽視窗變化
window.onresize = function ()

rem布局實現自適應

使用em和rem單位進行布局，相對 百分比布局更加靈活，可以根據瀏覽器的字型大小調整和縮放來相應顯示頁面。但因為em是相對父級元素的font size，想想就複雜。而rem是相對於根元素html的font size進行計算，繞開了複雜的層級關係，更加簡單。瀏覽器預設字型大小為16px，轉化關係為 1...

自適應布局

請你說一說你知道的所有web布局方式？1.浮動 float left right 2.inline block display inline block 行內塊級 3.flexible box 彈性盒子 display flex 4.grid display grid 5.絕對 相對布局 posit...

Vue Cli4搭建Vue專案

npm install g vue cli檢視腳手架版本 隨後建立專案 vue create vue next test選擇第二個 選擇相應的配置，不要選擇linter不然會後悔的 下一步輸入y，然後選擇相應的css 然後在選擇第乙個 再輸入y，然後回車就完事了 1 npm install 2 np...