在頁面布局之前,對rem進行配置,以適配移動端特點。
官方參考 vant文件---->快速上手---->高階用法---->rem適配---->
postcss-pxtorem 是一款 postcss 外掛程式，用於將px單位轉化為 rem。
使用步驟：
安裝：
npm i -d postcss-pxtorem配置 postcss.config.js
module.exports =
,'postcss-pxtorem':}
}
提示：
此時重啟服務(npm run serve)，發現頁面中的px單位會自動轉換成rem單位。
注意：
rem單位值 = px畫素值 / rootvalue。
lib-flexible 用於設定 rem 基準值，也就是設定font-size。
使用步驟：
安裝：
npm i amfe-flexiblemain.js 引入如下內容：
import
'amfe-flexible/index.min.js'
提示：
此時，審查元素會看到切換不同裝置時,html的font-size會隨著頁面大小改變而變化，大小是頁面實際寬度的 1/10。
注意：
元素實際大小 = rem * 基準值
開發中遇到問題:
vant 的rootvalue根植為37.5------>vant ui的設計稿的參照尺寸是375
設計稿rootvalue根植為75------>原始設計稿的參照尺寸是750
同樣是375px，在vant中是橫向滿屏顯示，在原始設計稿中應該是顯示一半大小，但現在也滿屏顯示，這樣不對。
解決方案(兩種)：
posttorem的rootvalue仍然為37.5,設計稿尺寸除以2作為css的px尺寸
即想要表現一半尺寸效果，就是375/2 = 187.5px
將rootvalue設定為動態的值->參考解決方案
配置 postcss.config.js：
const
=require
('path'
)module.
exports=(
)=>
vant`
)!==-1
?37.5:75
return
,'postcss-pxtorem':}
}}
使用vant元件不影響。
自己的標籤使用設計稿尺寸不用除以2，加快開發。
開發中常用的設計稿的尺寸通常是750px。
關於vuejs移動端元件vant，和remjs
1 有讚 vant 2 1 瀏覽器預設font size 16px 在自己寫專案的時候需要除以100，以下js 有說明。舉例，width 200px，換算成自己實際需要的rem，則是width 2rem。2 專案一般以iphone的機型 375x667 為標準並且乘以2，等於750x1334。那麼，...
vue 移動端適配vant
下面我們分別將這兩個工具配置到專案中完成 rem 適配。一 使用 lib flexible 動態設定 rem 基準值 html 標籤的字型大小 1 安裝 npm i amfe flexible2 然後在 main.js 中載入執行該模組 import amfe flexible 二 使用 postc...
移動端rem適配
3 使用js 將設計圖劃分為10等份或者15等份。新建common.less檔案，這是乙個專門來適配的檔案。我們大概可以寫如下的檔案 設定常見的螢幕尺寸 修改裡面的html文字大小 a 一定要寫到最上面 html 我們此次定義的劃分的份數 為 15 no 15 320 media screen an...