vue專案移動端 pc端適配方案(px轉rem)

2021-10-02 14:31:55 字數 2253 閱讀 4947

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

npm i lib-flexible -

snpm i postcss-px2rem -

s

簡要介紹這兩個包的用途:

lib-flexible會為頁面根據螢幕自動新增標籤,動態控制initial-scalemaximum-scaleminimum-scale等屬性的值。

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

import

'lib-flexible'

注意事項由於lib-flexible會動態給頁面header中新增標籤,所以務必請把目錄 public/index.html 中的這個標籤刪除!!!

因為lib-flexible主要用於手機自適應,當螢幕尺寸大於540px時,它設定html的font-size固定為54px,並不能根據螢幕尺寸調整標籤的font-size的大小,所以這裡需要修改lib-flexible原始碼。

在node-modules依賴包lib-flexible資料夾中的flexible.js檔案,可以看到原始碼

function

refreshrem()

var rem = width /10;

docel.style.fontsize = rem +

'px'

; flexible.rem = win.rem = rem;

}

修改替換成 width = width * dpr

function

refreshrem()

var rem = width /10;

docel.style.fontsize = rem +

'px'

; flexible.rem = win.rem = rem;

}

postcss-px2rem的配置放在vue-cli3 專案中vue.config.js檔案中(找不到?可能你是乙個新構建的專案,需要手動在專案根目錄建立vue.config.js

具體配置內容如下:

module.exports =

, postcss:)]

}}},

}

那為什麼你在這裡寫成了37.5呢???

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

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

1、對於行內樣式,阿里手淘並不能將px轉rem,所以對於需要自適應的樣式,如font-size、width、height等請不要寫在行內。同理,對於不需要轉化的樣式可以寫在行內,或者使用px(大寫)作為單位。

2、字型大小不使用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)

}

3、簡單來講阿里手淘的原理就是網頁隨著螢幕大小等比例縮放而已,所以此方案只適用於純手機端或者pc端的適配方案,當然手機端、pc端也可以同時適配,前提是頁面布局不變。一般而言,手機端、pc端共用乙個專案還是建議使用柵格布局、**查詢控制。

vue中使用rem布局解析+大屏自適應

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

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

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

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

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

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

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