Vueは大画面ページのスクリーン適応を実現します

この記事では、大画面ページのスクリーンアダプテーションを実現するためのVueの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

1. 設定ファイルで大画面デザインのサイズを1920*1080に設定する

//アプリ構成.js
エクスポートデフォルト{
    画面：{
        幅:1920,
        高さ:1080,
        スケール:20
    }//大画面デザインの幅と高さ}

2. resetScreenSize.jsを定義する

'../config/base' から appConfig をインポートします。
 
エクスポート関数pageResize(コールバック) {
    初期化 = () => {
        console.log(window.innerHeight + "," + window.innerWidth);    
        _el = document.getElementById('app'); とします。
       
        hScale を window.innerHeight / appConfig.screen.height に設定します。
        wScale を window.innerWidth / appConfig.screen.width に設定します。
        pageH = window.innerHeight とします。
        pageW = window.innerWidth とします。
       
        isWider を (window.innerWidth / window.innerHeight) >= (appConfig.screen.width / appConfig.screen.height) とします。
        コンソールにログ出力します。
        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)
        }
        それ以外 {
                _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);
                コンソールにログ出力します。
        }
        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);
    初期化()
}

3 使用方法

main.js インポート

'./config/base.js' から appConfig をインポートします。
Vue.prototype.appConfig を appConfig に追加します。
マウントされた関数で app.Vue import {pageResize} from './utils/resetScreenSize'
 
エクスポートデフォルト{
  名前: 'アプリ'、
  データ（）{
    戻る {
       
    }
  },
  マウントされた(){
    ページサイズを変更します。
    console.log('ページサイズを変更');
  }
}

コンポーネント内のスタイル lang="stylus"

 .mc{
        :flex; を表示します。
        フレックス方向:列;
        コンテンツを中央揃えにします。
        コンテンツを中央揃えにする  
        ディスプレイ: フレックス;
        フレックス: 1 1 自動;
        flex-direction: 列;
        パディング:(15/96)rem;
    }
 
    .leftC{
       幅: (410/96)rem;
    }
 
    .centerC{
       幅: (1060/96)rem;
    }
 
    .rightC{
       幅: (450/96)rem;
    }

96 は設定ファイル内の 1920/20 から導出されるため、さまざまな変換を実行する必要はありません。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: