手機端適應 vue專案移動端 pc端適配方案

vue專案移動端、pc端適配方案

npm i lib-flexible -s

npm i postcss-px2rem -s

flexible會為頁面根據螢幕自動新增標籤，動態控制initial-scale，maximum-scale，minimum-scale等屬性的值。

postcss-px2rem會將px轉換為rem，rem單位用於適配不同寬度的螢幕，根據標籤的font-size值來計算出結果，1rem=html標籤的font-size值。

在專案入口檔案main.js 中引入lib-flexible

import 'lib-flexible'

function refreshrem()

var rem = width / 10;
docel.style.fontsize = rem + 'px';
flexible.rem = win.rem = rem;
}

function refreshrem()

var rem = width / 10;
docel.style.fontsize = rem + 'px';
flexible.rem = win.rem = rem;
}

具體配置內容如下：

module.exports = ,

postcss: )
] }} },
}

之所以設為37.5，是為了引用像mint-ui這樣的第三方ui框架，因為第三方框架沒有相容px2rem ，將remunit的值設定為設計圖寬度（這裡為750px）75的一半，即可以1:1還原mint-ui的元件，否則會樣式會有變化，例如按鈕會變小。

既然設定成了37.5 那麼我們必須在寫樣式時，也將值改為設計圖的一半。

1、字型大小不使用rem

我們都知道chrome的最小顯示的字型是12px，如果字型用rem，計算出來小於12px，那麼就也會以12px顯示，而且我們不希望出現13px或者15px這樣的奇葩尺寸，所以字型最好是用px來表示，至於適應，我們可以寫**查詢。

.item 

@media screen and (min-width: 768px) 
@media screen and (min-width: 992px) 
@media screen and (min-width: 1200px)  
}

基於vue cli3的移動端適配問題

移動端PC端自適應

查詢 這段 的幾個引數解釋 width device width 寬度等於當前裝置的寬度 initial scale 初始的縮放比例 預設設定為1.0 minimum scale 允許使用者縮放到的最小比例 預設設定為1.0 maximum scale 允許使用者縮放到的最大比例 預設設定為1.0 ...

vue 移動端專案自適應

npm install npm run servevue 移動端專案，需要根據手機螢幕的大小自動適應，避免樣式bug，使用外掛程式專案自動轉化為 rem 布局，未開始或進行中的專案都可以進行配置 通過對 vue 專案進行配置，使得專案在啟動的時候，根據當前裝置的螢幕尺寸把尺寸 px 自動轉化為 re...

vue專案移動端 pc端適配方案

vue專案移動端 pc端適配方案 npm i lib flexible s npm i postcss px2rem s簡要介紹這兩個包的用途 flexible會為頁面根據螢幕自動新增標籤，動態控制initial scale，maximum scale，minimum scale等屬性的值。post...