您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“怎么用Vue實(shí)現(xiàn)大屏頁(yè)面的屏幕自適應(yīng)”的有關(guān)知識(shí),在實(shí)際案例的操作過(guò)程中,不少人都會(huì)遇到這樣的困境,接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
具體內(nèi)容如下
1. 在配置文件設(shè)置大屏設(shè)計(jì)的尺寸1920*1080
//appConfig.js export default{ screen:{ width:1920, height:1080, scale:20 }//大屏設(shè)計(jì)寬高 }
2. 定義resetScreenSize.js
import appConfig from '../config/base' export function pageResize(callback) { let init = () => { console.log(window.innerHeight + "," + window.innerWidth); let _el = document.getElementById('app'); let hScale = window.innerHeight / appConfig.screen.height; let wScale = window.innerWidth / appConfig.screen.width; let pageH = window.innerHeight; let pageW = window.innerWidth; let isWider = (window.innerWidth / window.innerHeight) >= (appConfig.screen.width / appConfig.screen.height); console.log(isWider); if (isWider) { _el.style.height = window.innerHeight+'px';// '100%'; _el.style.width = pageH * appConfig.screen.width / appConfig.screen.height + 'px'; _el.style.top='0px'; _el.style.left=(window.innerWidth -pageH * appConfig.screen.width / appConfig.screen.height)*0.5+'px'; console.log(_el.style.width + "," + _el.style.height) } else { _el.style.width = window.innerWidth+'px';// '100%'; _el.style.height = pageW * appConfig.screen.height / appConfig.screen.width + 'px'; _el.style.top= 0.5*(window.innerHeight-pageW * appConfig.screen.height / appConfig.screen.width)+'px'; _el.style.left='0px'; console.log(_el.style.height); console.log(_el.style.top); } document.documentElement.style.fontSize = (_el.clientWidth / appConfig.screen.scale) + 'px'; } var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; window.addEventListener(resizeEvt, init, false); document.documentElement.addEventListener('DOMContentLoaded', init, false); init() }
3 使用方式
main.js 引入
import appConfig from './config/base.js'; Vue.prototype.appConfig=appConfig; app.Vue 在mounted函數(shù)引入 import {pageResize} from './utils/resetScreenSize' export default { name: 'App', data(){ return{ } }, mounted(){ pageResize(); console.log('pageResize'); } }
組件中樣式 lang="stylus"
.mc{ display :flex; flex-direction :column; align-content :center; justify-content :center; display: flex; flex: 1 1 auto; flex-direction: column; padding:(15/96)rem; } .leftC{ width :(410/96)rem; } .centerC{ width :(1060/96)rem; } .rightC{ width :(450/96)rem; }
其中 96為 配置文件中1920/20得來(lái),這樣不用在進(jìn)行各種換算了
“怎么用Vue實(shí)現(xiàn)大屏頁(yè)面的屏幕自適應(yīng)”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。