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検証

推薦する

MySQL の concat 関数についての簡単な説明。MySQL でフィールドの前または後に文字列を追加する方法

MySQL で concat 関数を使用する方法: CONCAT(文字列1、文字列2、…)戻り値は、...

バージョン管理ツール Rational ClearCase の紹介

Rational ClearCase は、コードやその他のソフトウェア開発資産のバージョン管理を実...

Reactはconetxtを通じてマルチコンポーネント値転送関数を実装します

この関数の効果はvue的provide/injectに似ています。 contextを通じて反応できる...

JS 継承の詳細

目次序文準備する要約する継承方法プロトタイプ継承プロトタイプチェーン継承コンストラクタの借用(クラス...

OneProxy に基づいて MySQL の読み取り/書き込み分離と負荷分散を実装する

導入パート1: 冒頭に書いたOneProxy は、民間ソフトウェアによって完全に独立して開発された分...

自己終了XHTMLタグを書くときに注意すべきこと

XHTMLの img タグは、次のように記述する必要があります: <img alt="...

Docker イメージのエクスポート、インポート、コピーの例の分析

最初の解決策は、イメージを公開イメージリポジトリにプッシュし、それをプルダウンすることです。 2 番...

MYSQL 左結合の最適化 (10 秒から 20 ミリ秒)

目次【機能背景】 [生のSQL] 【独自SQL解析】 【分析手順】 [最適化されたSQL] 【最適化...

LinuxスレッドのPID(TID、LWP)を取得するいくつかの方法の詳細な説明

Linux C/C++ では、スレッド レベルの操作は通常、pthread ライブラリを通じて実行さ...

webpackが静的リソースキャッシュを実装する方法

目次導入複数の異なるハッシュを区別するハッシュチャンクハッシュコンテンツハッシュjs キャッシュの実...

HTML DOCTYPEの略語

DOCTYPE が次のとおりである場合:コードをコピーコードは次のとおりです。 <!DOCTY...

Vue 開発者向けの VSCode 拡張機能ベスト 7

適切な VS Code 拡張機能を Visual Studio に追加すると、開発者としての作業がは...

Linux でメモリ使用量を確認する方法

システムの問題、アプリケーションの速度低下、または原因不明の問題をトラブルシューティングする場合、最...

html オプション 無効 選択 選択 無効 オプションの例

コードをコピーコードは次のとおりです。 <選択> <オプション値="&q...

IE6/IE7/IE8/IE9/FF 向け CSS ハック (概要)

IE8.0の正式版をインストールしたので、基本的なCSS HACKをいくつかまとめてみました。We...