vue 移動端專案自適應

2021-10-05 04:10:33 字數 1234 閱讀 5390

npm install


npm run serve
vue 移動端專案，需要根據手機螢幕的大小自動適應，避免樣式bug，使用外掛程式專案自動轉化為 rem 布局，未開始或進行中的專案都可以進行配置

通過對 vue 專案進行配置，使得專案在啟動的時候，根據當前裝置的螢幕尺寸把尺寸 px 自動轉化為 rem ，

如：在iphone6 375寬的標準螢幕下，div的寬高為200px，在iphone6 pluse 414寬的螢幕下，div的寬高就應該自適應變為 414 / 375 * 200 = 220.8px

一 安裝依賴

npm install postcss-px2rem
二 rem.js

專案 public 目錄下新建 rem.js

const basesize =


16// 頁面預設字型大小(不做更改)


// 設定 rem 函式


function


setrem()


// 初始化


setrem()


// 改變視窗大小時重新設定 rem


window.


onresize


=function()
三 vue.config.js 檔案配置

vue3.0 將專案配置劃到 vue.config.js 這個檔案裡，更加直觀，沒有就新建

const px2rem =


require


('postcss-px2rem'


)const postcss =


px2rem()


module.exports =}}


}
四 main.js 配置
import vue from


"vue";;


import router from


"./router"


;import store from


"./store"


;vue.config.productiontip =


false


;// 專案啟動時，載入自適應配置


(function()


)()new


vue().


$mount()


;

這樣，載入頁面的時候，vue專案的配置會自動將 px 轉化為 rem 為單位，自適應裝置螢幕大小

移動端自適應

1 js動態設定html的字型大小 var clientwidth 0 if document.documentelement.clientwidth 600 else document.documentelement.style.fontsize 50 clientwidth 375 px win...

移動端自適應

width device width width為設定layout viewport 的寬度，為乙個正整數，width device 表示寬度是裝置螢幕的寬度 initial scale 1.0 initial scale為設定頁面的初始縮放值，可以是乙個帶小數的數字，1.0就是佔網頁的100 mi...

vue專案螢幕自適應 Vue專案螢幕自適應

一 安裝lib flexible npm i lib flexible d 二 在main.js中引入 import lib flexible flexible 三 在index.html檔案中設定meta標籤 四 然後在專案中寫css時會自動將rem轉化為px,需要安裝px2rem這個工具 npm...