Vue 螢幕適配 postcss pxtorem

2021-10-01 18:00:25 字數 989 閱讀 6756

此適配方案是每次螢幕尺寸或解析度發生大小的時候都會把所有的px替換成rem單位。

1、安裝依賴

npm install postcss-pxtorem -d
2、在根目錄建立postcss.config.js檔案

3、建立rem.js

// 設定 rem 函式

function setrem()

// 初始化

setrem();

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

window.onresize = function() ;

4、將rem.js引入main.js中

import "./你的路徑/rem.js";

5、最後別忘了重啟專案!下面隨便找個東西測試一下

我這寫了乙個100px * 100px的, 在**中是這樣的

執行後在控制台中是這樣的

大功告成!

Vue移動端螢幕適配

第一步 在src路徑下新建乙個js資料夾,在建立乙個resize.js檔案 第二部 在resize.js檔案內寫入以下 function doc,win if doc.addeventlistener return domcontentloaded是firefox下特有的event,當所有dom解析...

vue適配不同螢幕大小 移動端適配的幾種方案

適配思路 設計稿 750 1334 開發 適配不同的手機螢幕,使其顯得合理 原則開發時方便,寫 時設定的值要和標註的 160px 相關 方案要適配大多數手機螢幕,並且無 bug 使用者體驗要好,頁面看著沒有不適感 思路寫頁面時,按照設計稿寫固定寬度,最後再統一縮放處理,在不同手機上都能用 按照設計稿...

android螢幕適配

1 配置android應用程式適配在不同的手機上,需要在androidmanifest.xml檔案的manifest標籤中新增子元素 1 2 3 4 5 6 7 8 9 10 manifestxmlns android supports screens android smallscreens tr...