この記事では、大画面ページのスクリーンアダプテーションを実現するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQLにおけるトランザクションの永続性実装原理の詳細な説明
ほとんどの人はMySQLをコンパイルしてシステムディレクトリに置きますが、私のやり方はコンパイルした...
地球の円周率と半径、検索ポイントの経度と緯度から、検索ポイントと検索データテーブル間の距離はNキロメ...
PostgreSQL正規表現の一般的な機能の概要正規表現は、複雑なデータ処理を必要とするプログラムに...
Docker を使用すると、外部からコンテナにアクセスしたり、コンテナを相互接続したりすることで、ネ...
公式サイトをダウンロード自分に合ったバージョンを選択してダウンロードしてください。 ダウンロードをク...
データベースのバックアップ #文法: # mysqldump -h server-u usernam...
多くの Web ページにはナビゲーション バーに小さな三角形があり、この機能を実装するのは実は非常に...
例を見てみましょう。コードは次の通り非常にシンプルです。コードをコピーコードは次のとおりです。 &l...
この記事の例では、JavaScriptで等速アニメーションを実装するための具体的なコードを参考までに...
Linux がすべてのコマンドをサポートしていない場合はどうすればいいですか?すべてのLinuxコマ...
無料のパブリック STUN サーバーSIP 端末がプライベート IP アドレスを使用する場合、スタン...
元のコード: center.html : <!DOCTYPE html> <htm...
HTML にオーディオ ファイルを挿入した後 (mp3 ファイルを再生した後) に発生したいくつかの...
今日は、Docker イメージ、各レイヤーの内容を調べ、Docker/OCI イメージのサイズを縮小...
チームはフロントエンドとバックエンドを分離しているため、フロントエンドが Nginx とノード層を引...