Vue 實現大屏頁面的螢幕自適應

1. 在配置檔案設定大屏設計的尺寸1920*1080

export default//大屏設計寬高}

2. 定義resetscreensize.js

export function pageresize(callback)

else

}

var resizeevt = 'orientationchange' in window ? 'orientationchange' : 'resize';

window.addeventlistener(resizeevt, init, false);

document.documentelement.addeventlistener('domcontentloaded', init, false);

init()}

3 使用方式

main.js 引入

import   from './utils/resetscreensize'

export default 
},mounted()
}

.mc

.leftc
.centerc
.rightc

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

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

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

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

大屏自適應頁面開發分享

大屏自適應頁面開發分享 說到大屏頁面可能大家內心會感覺到一丟丟的發抖，因為感覺字型及布局控制實在是太困難了，哈哈哈 這其實是我剛剛開始做這種頁面的內心活動。下面說一下我做這種頁面的過程 1 1920 1080 等比例縮放 這是我第一版做出來的方式，但是這個方式做出來是有弊端的 1 不能適應所有的螢幕...