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

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • VUEは、分散医療登録システムのバックグラウンド管理ページステップを開発しています。
  • VUE が分散医療登録システムのバックエンド管理ページを構築するための手順の例
  • Vueプロジェクトでページジャンプを実装する方法
  • VUE、分散医療登録システム向け病院設定ページ手順を開発

<<:  MySQLにおけるトランザクションの永続性実装原理の詳細な説明

>>:  HTML検証 HTML検証

推薦する

CentOS 6.5 i386 インストール MySQL 5.7.18 詳細チュートリアル

ほとんどの人はMySQLをコンパイルしてシステムディレクトリに置きますが、私のやり方はコンパイルした...

N キロメートル以内のデータを検索する MySQL の簡単な例

地球の円周率と半径、検索ポイントの経度と緯度から、検索ポイントと検索データテーブル間の距離はNキロメ...

PostgreSQL正規表現の一般的な機能の概要

PostgreSQL正規表現の一般的な機能の概要正規表現は、複雑なデータ処理を必要とするプログラムに...

Dockerコンテナを外部IPとポートにバインドする方法

Docker を使用すると、外部からコンテナにアクセスしたり、コンテナを相互接続したりすることで、ネ...

MySQL 5.7.29 + Win64 解凍バージョンのインストールチュートリアル(画像とテキスト付き)

公式サイトをダウンロード自分に合ったバージョンを選択してダウンロードしてください。 ダウンロードをク...

MySQL データベースのバックアップとリカバリの実装コード

データベースのバックアップ #文法: # mysqldump -h server-u usernam...

小さな三角形の実装コードを含む CSS ナビゲーション バー メニュー

多くの Web ページにはナビゲーション バーに小さな三角形があり、この機能を実装するのは実は非常に...

折りたたまれたテーブル行要素のバグ

例を見てみましょう。コードは次の通り非常にシンプルです。コードをコピーコードは次のとおりです。 &l...

均一なアニメーション効果を実現するJavaScript

この記事の例では、JavaScriptで等速アニメーションを実装するための具体的なコードを参考までに...

Linuxがすべてのコマンドをサポートしていない問題の解決策

Linux がすべてのコマンドをサポートしていない場合はどうすればいいですか?すべてのLinuxコマ...

無料のパブリック STUN サーバー

無料のパブリック STUN サーバーSIP 端末がプライベート IP アドレスを使用する場合、スタン...

HTML にオーディオファイルを挿入してブラウザで再生する場合の互換性の問題

HTML にオーディオ ファイルを挿入した後 (mp3 ファイルを再生した後) に発生したいくつかの...

Dockerイメージ解析ツールのダイブ原理解析

今日は、Docker イメージ、各レイヤーの内容を調べ、Docker/OCI イメージのサイズを縮小...

1 つの記事で Nginx ロケーション マッチングの実装を理解する

チームはフロントエンドとバックエンドを分離しているため、フロントエンドが Nginx とノード層を引...