この記事では、大画面ページのスクリーンアダプテーションを実現するための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 で concat 関数を使用する方法: CONCAT(文字列1、文字列2、…)戻り値は、...
Rational ClearCase は、コードやその他のソフトウェア開発資産のバージョン管理を実...
この関数の効果はvue的provide/injectに似ています。 contextを通じて反応できる...
目次序文準備する要約する継承方法プロトタイプ継承プロトタイプチェーン継承コンストラクタの借用(クラス...
導入パート1: 冒頭に書いたOneProxy は、民間ソフトウェアによって完全に独立して開発された分...
XHTMLの img タグは、次のように記述する必要があります: <img alt="...
最初の解決策は、イメージを公開イメージリポジトリにプッシュし、それをプルダウンすることです。 2 番...
目次【機能背景】 [生のSQL] 【独自SQL解析】 【分析手順】 [最適化されたSQL] 【最適化...
Linux C/C++ では、スレッド レベルの操作は通常、pthread ライブラリを通じて実行さ...
目次導入複数の異なるハッシュを区別するハッシュチャンクハッシュコンテンツハッシュjs キャッシュの実...
DOCTYPE が次のとおりである場合:コードをコピーコードは次のとおりです。 <!DOCTY...
適切な VS Code 拡張機能を Visual Studio に追加すると、開発者としての作業がは...
システムの問題、アプリケーションの速度低下、または原因不明の問題をトラブルシューティングする場合、最...
コードをコピーコードは次のとおりです。 <選択> <オプション値="&q...
IE8.0の正式版をインストールしたので、基本的なCSS HACKをいくつかまとめてみました。We...