Gokudōゲームにおけるフロントエンド知識のまとめ

背景

日本語を学び始めた当初は、日本語の50音を覚えるのは簡単ではなく、特にカタカナを覚えるのは困難でした。この時、断片的な時間を有効に活用して、昼休みや地下鉄の中でいつでも50音を練習できるアプリがあったらいいなと思いました。そこでApp Storeを検索してみたところ、確かに50音を学習できるアプリはたくさんあるのですが、ストア内のアプリはアプリ内購入があったり、広告があったり、サイズが40Mを超えていたりと、満足できるアプリは見つかりませんでした。そこで、このアプリケーションの開発と設計の過程で得た成果を主に紹介する記事を自分で書くことにしました。

成し遂げる

オンライン体験アドレス: https://dragonir.github.io/kanaApp/

実装効果は以下のとおりです。アプリケーションは主に3つのページに分かれています。

ホームページ: メニューオプション (ひらがな練習、カタカナ練習、混合練習)、ダークモード切り替えボタンが含まれます。
回答ページ: 残りチャンスとスコア表示エリア、中央の質問エリア、下部の回答ボタンが含まれます。
結果ページ: 結果スコアの表示とホームページに戻るボタン。

回答ロジックのルールは、質問表示エリアの単語に対応する正しいオプションを、指定された4回答ボタンから選択することです。アプリケーションは、クリックに基づいてフィードバックを提供し、誤った回答にスコアを付けます。10 10間違えると、ゲームが終了し、結果ページが読み込まれます。ゲームロジックの実装はこの記事の主な内容ではないため、後ほど詳しく説明しません。この記事の主な内容は、このミニゲームの開発プロセスに関わるフロントエンドの知識の紹介です。

ダークモード⚪⚫

Windows 10 、 MacOs 、 Androidなどのシステムがダークモードを相次いで導入するにつれ、ブラウザもシステムテーマカラー設定の検出をサポートするようになり、ダークモード切り替え機能が設定されるウェブアプリケーションも増えてきました。 50音小游戲の視覚体験を最適化するために、ダークスタイルも構成しました。効果は次のとおりです。

ダークモードを決定するCSSメディアクエリ

prefers-color-schemeメディア機能は、ユーザーがシステムのテーマカラーを明るい色に設定したか暗い色に設定したかを検出するために使用されます。使用構文は次のとおりです。

@media (prefers-color-scheme: value) {} value次の3値があります。

light : ユーザーのシステムがダークモードをサポートしており、ライトテーマ (デフォルト) に設定されていることを示します。
dark : ユーザーのシステムがダークモードをサポートしており、ダークテーマに設定されていることを示します。
no-preference : ユーザーのシステムがダークモードをサポートしていないか、ダークモードに設定されているかどうかわからないことを示します (非推奨)。

結果がno-preferenceの場合、このメディア機能を使用して、ホストシステムがテーマカラーの設定をサポートしているかどうか、またはユーザーが積極的に no preference に設定したかどうかを判断することはできません。プライバシー保護などの理由から、ユーザーまたはユーザーエージェントがブラウザ内でこれをno-preferenceに設定する場合もあります。

次の例では、システムテーマカラーが暗い場合、 .demo要素の背景色は#FFFFFFになり、システムテーマカラーが明るい場合、 .demo要素の背景色は#000000になります。

@media (優先カラースキーム: 暗い) {
  .demo { 背景: #FFFFFF; }
}
@media (優先カラースキーム: 明るい) {
  .demo { 背景: #000000; }
}

ダークモードを決定するJavaScript

window.matchMedia()メソッドは、指定されたメディアクエリ(en-US)字符串を解析した結果を表す新しいMediaQueryListオブジェクトを返します。返されたMediaQueryListは、 Documentメディアクエリに一致するかどうかを判断したり、 documentを監視してメディアクエリに一致するか一致しなくなったかを判断したりするために使用できます。 MediaQueryListオブジェクトには、 matchesおよびmediaプロパティと、 addListenerおよびremoveListenerメソッドがあります。

システムがテーマカラーをサポートしているかどうかを判断するための判断媒体としてmatchMedia使用します。

if (window.matchMedia('(prefers-color-scheme)').media === 'not all') {
  // ブラウザはテーマカラー設定をサポートしていません}
if (window.matchMedia('(prefers-color-scheme: dark)').matches){
  // ダークモード } else {
  // ライトモード}

さらに、システムのダークモードの状態を動的に監視し、システムのダークモードの切り替えに応じてリアルタイムで応答することもできます。

window.matchMedia('(prefers-color-scheme: dark)').addListener(e => {
  if (e.matches) {
    // ダークモードをオンにする } else {
    // ダークモードをオフにする }
});

または、ダークモードまたはライトモードを個別に検出します。

const リスナー = {
  暗い: (mediaQueryList) => {
    mediaQueryListが一致する場合
      // ダークモードをオンにする}
  },
  ライト: (mediaQueryList) => {
    mediaQueryListが一致する場合
      // ライトモードをオンにする}
  }
};
window.matchMedia('(prefers-color-scheme: dark)').addListener(listeners.dark);
window.matchMedia('(prefers-color-scheme: light)').addListener(listeners.light);

50トーンゲームでは、 JavaScriptを使用してシステムがダークモードをオンにしているかどうかを検出し、 cssクラス名を動的に追加してダークモードを自動的にロードします。同時に、暗い色と明るい色の切り替えボタンも提供されており、テーマを手動で切り替えることができます。

HTML要素のダークモードの決定

ページで画像要素が使用されている場合、システムがダークモードを有効にしているかどうかをHTMLで直接判断できます。のように：

<写真>
  <source srcset="dark.jpg" media="(prefers-color-scheme: dark)">
  <img src="light.jpg">
</画像>

picture要素を使用すると、さまざまなデバイスにさまざまな画像を表示することができ、通常は応答性のために使用されます。 HTML5では<picture>要素が導入され、画像リソースをより柔軟に調整できるようになりました。 <picture>要素には、0 個以上の<source>要素と 1 つの<img>要素が含まれます。各<source>要素は異なるデバイスに一致し、異なる画像ソースを参照します。一致するものがない場合、 <img>要素のsrc属性のurlが選択されます。

注意: <img>要素は最後の<picture>要素の後に配置されます。ブラウザがこの属性をサポートしていない場合は、 <img>要素内の画像が表示されます。

オフラインキャッシュ

ネイティブアプリケーションのように素早くアクセスするためのショートカットをデスクトップ上に生成し、いつでもどこでもオフラインで使用できるようにするために、 50音小游戲オフラインキャッシュ技術を採用したPWA應用です。以下は、 PWA離線應用実装テクノロジの簡単な説明です。

PWA (progressing web app)は下一代WEB應用模型です。 PWAアプリケーションは、まず Web ページであり、 App ManifestとService Workerを使用してインストールやオフラインなどの機能を実装します。

特徴：

プログレッシブ: プログレッシブエンハンスメントを主な目的として開発されているため、あらゆるブラウザを使用するすべてのユーザーに適しています。
レスポンシブ: デスクトップ、モバイル、タブレット、または次に来るものなど、あらゆるフォームファクターに適合します。
接続の独立性: サービスワーカーの支援により、オフラインまたは低品質のネットワーク条件でも作業できます。
オフラインプッシュ: プッシュメッセージ通知を使用すると、アプリケーションをNative Appのようにして、ユーザーエクスペリエンスを向上させることができます。タイムリーな更新: サービスワーカーの更新プロセスは常に最新の状態に保たれます。
セキュリティ: 覗き見を防止し、コンテンツが改ざんされていないことを確認するために、 HTTPS経由で提供されます。

設定ページのパラメータ

プロジェクトのルートディレクトリにmanifest.webmanifestまたはmanifest.jsonファイルを追加し、ファイルに次の構成情報を書き込みます。この例では、 50音小游戲のページパラメータ情報は次のように構成されています。

// マニフェスト.webmainifest
{
  "name": "かなゲーム",
  "short_name": "かなゲーム",
  "start_url": "index.html",
  "ディスプレイ": "スタンドアロン",
  "背景色": "#fff",
  "description": "かなゲーム",
  「アイコン」: [
    {
      "src": "assets/images/icon-64x64.jpg",
      "サイズ": "64x64",
      "タイプ": "画像/jpg"
    },
    {
      "src": "assets/images/icon-256x256.jpg",
      "サイズ": "256x256",
      "タイプ": "画像/jpg"
    }
  ]
}

パラメータの説明:

name : Web Appの名前。デスクトップに保存されるときのアプリケーションアイコンの名前でもあります。
short_name : nameが長すぎる場合は、 nameの代わりにWeb Appの略語であるshort_name使用されます。
start_url : ユーザーがWeb Appを開いたときに読み込むURLを指定します。 URL manifestファイルが配置されているパスを基準とした相対パスになります。
display : アプリケーションの表示モードを指定します。選択できる値は 4 つあります。

fullscreen : 全画面表示。表示領域を可能な限り埋めます。

standalone : ブラウザ関連のUI (ナビゲーションバー、ツールバーなど) は非表示になり、 Native Appのように見えます。

minimal-ui : 表示形式はstandaloneに似ており、ブラウザ関連のUIボタンに最小化されます。ブラウザによって実装が若干異なります。 browser ：基本的には通常のブラウザで開いた場合と同じスタイルになります。

一部のシステムのブラウザがfullscreenをサポートしていない場合は、 standalone効果として表示されます。 standaloneをサポートしていない場合は、 minimal-ui効果として表示されます。

description : アプリケーションの説明。

icons : アプリケーションのデスクトップアイコンと起動ページのイメージを配列として指定します。

サイズ: アイコンのサイズ。サイズを指定すると、システムは対応する位置に表示する最も適切なアイコンを選択します。
src: アイコンのパス。相対パスはmanifestファイルに対する相対パスであり、絶対パスも使用できます。
type: アイコン画像タイプ。ブラウザはiconsの中から128dp(px = dp * (dpi / 160))に最も近い画像を起動画面の画像として選択します。

background_color : 起動画面の背景色を指定します。同じ色を使用すると、起動画面からホームページへのスムーズな遷移を実現できるほか、ページリソースの読み込み時のユーザーエクスペリエンスを向上させることもできます。

theme_color : Web Appのテーマカラーを指定します。このプロパティを使用して、ブラウザUIの色を制御できます。たとえば、ステータスバーの色、コンテンツページのステータスバー、アドレスバーなどです。

設定情報自動生成ツール: https://tomitm.github.io/appmanifest/

HTMLファイルの設定

manifest構成ファイルをindex.htmlにインポートし、次の構成情報をheadに追加してiOS系統と互換性を持たせます。

<meta name=viewport content="width=デバイス幅、初期スケール=1、最大スケール=1、最小スケール=1、ユーザースケーラブル=いいえ、ビューポートフィット=カバー">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="かなゲーム">
<link rel="スタイルシート" type="text/css" href="./assets/css/main.css" rel="外部nofollow" >
<link rel="スタイルシート" type="text/css" href="./assets/css/dark.css" rel="外部 nofollow" >
<link rel="スタイルシート" type="text/css" href="./assets/css/petals.css" rel="外部 nofollow" >
<link rel="ショートカットアイコン" href="./assets/images/icon-256x256.jpg" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" >
<link rel="apple-touch-icon" href="./assets/images/icon-256x256.jpg" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" />
<link rel="apple-touch-icon-precomposed" href="./assets/images/icon-256x256.jpg" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" >
<link rel="ブックマーク" href="./assets/images/icon-256x256.jpg" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" />
<link rel="manifest" href="./manifest.webmanifest" rel="外部 nofollow" >
<title>かなゲーム</title>

apple-touch-icon : manifest.jsonファイルのicons構成と同様にアプリケーションアイコンを指定します。また、さまざまなシナリオでの選択のためにsizes属性もサポートします。
apple-mobile-web-app-capable : manifest.jsonのdisplay関数と同様に、 yesに設定するとstandaloneモードに入ることができます。
apple-mobile-web-app-title : アプリの名前を指定します。
apple-mobile-web-app-status-bar-style : iOS モバイルデバイスの狀態欄status barのスタイルを指定します。オプションは、 Default 、 Black 、 Black-translucentです。

Service Workerの登録

server-worker を登録するには、 index.htmlに次のコードを追加します。

window.addEventListener('load', () => {
  SWを登録します。
});
非同期関数registerSW() {
  if ('serviceWorker' in ナビゲータ) {
    試す {
      navigator.serviceWorker.register('./sw.js'); を待機します。
    } キャッチ (e) {
      console.log(`SW登録に失敗しました`);
    }
  }
}

serviceWorkerContainer.register()を使用してService workerを登録し、 try...catch...フォールトトレラント判定を追加して、 Service workerサポートされていない場合でも正常な動作を保証します。もう一つ注意すべき点は、 httpsの場合のみ、 navigatorにserviceWorkerオブジェクトが存在することです。

Service workers基本的に、 Webアプリケーション、ブラウザ、ネットワーク (使用可能な場合) 間のプロキシサーバーとして機能します。効果的なオフラインエクスペリエンスを実現するように設計されており、ネットワーク要求をインターセプトし、ネットワークが利用可能かどうかに基づいて適切なアクションを実行し、サーバーからリソースを更新します。また、プッシュ通知のエントリポイントとバックグラウンド同期APIへのアクセスも提供します。 Service workder詳細については、記事の最後にあるリンクをご覧ください🔗 。

ルートディレクトリにsw.jsを追加し、キャッシュ情報とメソッドを定義します。

// キャッシュのキー値を定義します const cacheName = 'kana-v1';
// キャッシュする必要があるファイルを定義する const staticAssets = [
  './',
  './index.html',
  './assets/css/main.css',
  './assets/js/main.js',
  './assets/images/bg.jpg'
  // ...
];

// インストールイベントをリッスンし、インストールが完了したらファイルをキャッシュします。self.addEventListener('install', async e => {
  // キーに対応するキャッシュを検索し、操作可能なキャッシュ オブジェクトを取得します。const cache = await caches.open(cacheName);
  // キャッシュする必要があるファイルを追加します。await cache.addAll(staticAssets);
  self.skipWaiting() を返します。
});

// キャッシュされたデータを更新するために activate イベントをリッスンします self.addEventListener('activate', e => {
  // 最初のロードフェッチが self.clients.claim() をトリガーすることを確認します。
});

// キャッシュされたデータを使用するためにフェッチ イベントをリッスンします。
self.addEventListener('fetch', 非同期e => {
  定数 req = e.request;
  const url = 新しい URL(req.url);
  url.origin === location.origin の場合 {
    e.respondWith(cacheFirst(req));
  } それ以外 {
    e.respondWith(ネットワークとキャッシュ(req));
  }
});

非同期関数cacheFirst(req) {
  // 現在のリクエストをキャッシュする必要があるかどうかを判断します const cache = await caches.open(cacheName);
  const キャッシュ = cache.match(req);
  // キャッシュがある場合は、そのキャッシュを使用します。ない場合は、新しいリクエストから取得します。 return cached || fetch(req);
}

非同期関数networkAndCache(req) {
  const キャッシュ = caches.open(cacheName) を待機します。
  試す {
    // キャッシュ エラーも新しいリクエストから直接取得されます const fresh = await fetch(req);
    cache.put(req, fresh.clone()) を待機します。
    新鮮な状態に戻る。
  } キャッチ (e) {
    const キャッシュ = cache.match(req);
    キャッシュされたものを返します。
  }
}

sw.jsで使用される標準のweb workerプログラミングメソッドは、 windowとは異なる別のグローバルコンテキスト（self）で実行されるため、 self.addEventListener()が使用されます。

Cache API 、キャッシュを操作するためにService Workerによって提供されるインターフェースです。これらのインターフェースは、 CacheやCache Storageなど、 Promiseに基づいて実装されています。 Cacheリクエストと直接対話し、キャッシュされたRequest / Responseオブジェクトのペアのストレージメカニズムを提供します。 CacheStorage 、 Cacheオブジェクトのストレージインスタンスを表します。グローバルcachesプロパティを使用して、 Cache APIに直接アクセスできます。

** Cache関連APIの説明:

Cache.match(request, options) : Cacheオブジェクトに一致する最初のキャッシュされたリクエストresolve Promiseオブジェクトを返します。
Cache.matchAll(request, options) : Promiseオブジェクトを返します。 resolveの結果は、 Cacheオブジェクトに一致するすべてのリクエストの配列です。 Cache.addAll(requests) : URLの配列を受け取り、返されたresponseオブジェクトを取得して、指定されたCacheオブジェクトに追加します。
Cache.delete(request, options) : key値requestを持つCacheエントリを検索します。見つかった場合、 Cacheエントリは削除され、 trueにresolve Promiseオブジェクトが返されます。見つからない場合は、 falseにresolve Promiseオブジェクトが返されます。
Cache.keys(request, options) : Promiseオブジェクトを返します。 resolveの結果は、 Cacheオブジェクトのkey値の配列になります。

注: request.clone()とresponse.clone()は、 requestとresponseがストリームであり、一度しか使用できないため使用されます。キャッシュは一度消費されており、 HTTPリクエストが開始されると再び消費されます。このとき、リクエストを複製するためにcloneメソッドが使用されます。

これで、インストールされたService Workerページが開かれると、 Service Workerスクリプトの更新がトリガーされます。 Service Workerデータベースに書き込まれた最後のスクリプト更新のタイムスタンプが現在の更新から24小時以上離れている場合、 Service Workerスクリプト更新がトリガーされます。 sw.jsファイルが変更されると、 Service Workerスクリプトの更新がトリガーされます。更新プロセスはインストールプロセスと似ていますが、更新されたService Worker更新が正常にインストールされた直後にはactive状態になりません。更新された Service Worker は、元のService Workerと共存し、そのinstallを実行します。新しいService Workerが正常にインストールされると、 wait状態になり、古いバージョンのService Workerが開始/スレッドが終了するまで待機する必要があります。

Server Worker記事の最後にあるリンクを参照してください🔗

結果：

PC 側 🖥️: Windowsでは、ブラウザで初めてアプリを開いた後にインストールプロンプトが表示されます。インストールアイコンをクリックしてインストールします。デスクトップとスタートメニューにアプリケーションのショートカットが生成されます。ショートカットをクリックしてアプリを開きます。

Mac 💻 : 上記のchromiumn內核ブラウザ ( chrome 、 opera 、 edge新バージョン) も同様です。インストール後、 launchpadにショートカットが生成されます。

モバイル 📱: iPhone 。ブラウザで [デスクトップに保存] を選択すると、デスクトップアイコンが生成されます。アイコンをクリックすると、オフラインアプリケーションが開きます。

桜が散る🌸 🌸

視覚効果と興味を高めるために、ページに桜の花が散る🌸のエフェクトを追加しました。落下効果のアニメーションでは、主にElement.animate()メソッドを使用します。

Elementのanimate()メソッドは、新しいAnimationを作成し、それを要素に適用して、アニメーションを実行する便利なメソッドです。新しく作成されたAnimationオブジェクトインスタンスを返します。要素には複数のアニメーション効果を適用できます。 Element.getAnimations()関数を呼び出すと、これらのアニメーション効果のリストを取得できます。

基本的な構文:

var animation = element.animate(キーフレーム、オプション);

パラメータ:

keyframes : キーフレーム。キーフレームのコレクションを表すオブジェクト。
options : アニメーションの継続時間を表すオプションの整数 (ミリ秒単位)、または 1 つ以上の時間プロパティを含むオブジェクト:

id : オプションanimate()で一意の識別子として使用できるプロパティ。アニメーションを参照するために使用される文字列 ( DOMString ) delay : オプション。開始時間を遅らせるミリ秒数。デフォルト値は0です。

direction : オプション、アニメーションの方向。 normal順方向に実行し、 reverseでは逆方向に実行して、各反復後に方向を切り替えますalternate逆方向に実行して、各反復後に方向を切り替えますalternate-reverse 。デフォルトはnormalです。

duration : オプション。アニメーションが各反復を完了するのにかかるミリ秒数。デフォルト値は0です。 easing : オプション。時間の経過とともにアニメーションが変化する頻度。許容されるプリセット値には、 linear 、 ease 、 ease-in 、 ease-out 、 ease-in-out 、およびcubic-bezier(0.42, 0, 0.58, 1)などのカスタム値cubic-bezierがあります。デフォルト値はlinearです。

endDelay : オプション、アニメーション終了後の遅延、デフォルト値は0です。

fill : オプション。アニメーション効果が要素にいつ影響するかを定義します。 backwardsアニメーションが開始する前、 forwardsアニメーションが完了した後、 both要素に影響します。デフォルト値はnoneです。

iterationStart : オプション。反復のどの時点でアニメーションを開始するかを説明します。たとえば、 0.5最初の反復の途中から開始することを意味し、この値を設定すると、反復が2回のアニメーションは 3 回目の反復の途中で終了します。デフォルトは0.0です。

iterations : オプション、アニメーションを繰り返す回数。デフォルト値は1ですが、要素が存在する場合にそれを繰り返すためにinfinityの値を取ることもできます。

次のコードは、この例の具体的な実装です。 HTMLには複数の.petal要素があります。次に、 JavaScriptすべての.petal要素を取得し、ランダムなアニメーションを追加します。桜の花びらが舞い落ちる効果を実現するために、CSS で 2 種類の回転アニメーションと変形アニメーションが追加されています。

<div id="花びらコンテナ">
  <div class="花びら"></div>
  <!-- ... -->
  <div class="花びら"></div>
</div>

var petalPlayers = [];
関数animatePetals() {
  var 花びら = document.querySelectorAll('.petal');
  if (!petals[0].animate) {
    var petalsContainer = document.getElementById('petals_container');
    false を返します。
  }
  (var i = 0, len = petals.length; i < len; ++i) の場合 {
    var 花びら = 花びら[i];
    petal.innerHTML = '<div class="rotate"><img src="petal.jpg" class="askew"></div>';
    var スケール = Math.random() * .6 + .2;
    var プレイヤー = petal.animate([{
        変換: 'translate3d(' + (i / len * 100) + 'vw,0,0) scale(' + scale + ')',
        不透明度: スケール
      },
      {
        変換: 'translate3d(' + (i / len * 100 + 10) + 'vw,150vh,0) スケール(' + scale + ')',
        不透明度: 1
      }
    ], {
      期間: Math.random() * 90000 + 8000,
      反復回数: 無限、
      遅延: -(Math.random() * 5000)
    });
    petalPlayers.push(プレイヤー);
  }
}
花びらをアニメーション化します();

.花びら.回転{
  アニメーション:driftyRotate 1s infinite both easy-in-out;
  視点: 1000;
}
.花びら .斜め {
  変換: skewY(10deg);
  表示: ブロック;
  アニメーション: ドリフト 1 秒無限交互イーズインアウト;
  視点: 1000;
}
.petal:nth-of-type(7n) .askew {
  アニメーション遅延: -.6秒;
  アニメーション期間: 2.25秒;
}
.petal:n番目の型(7n + 1) .askew {
  アニメーション遅延: -.879秒;
  アニメーション期間: 3.5秒;
}
/* ... */
.petal:nth-of-type(9n) .rotate {
  アニメーション期間: 2秒;
}
.petal:n番目の型(9n + 1) .rotate {
  アニメーション期間: 2.3秒;
}
/* ... */
@keyframes ドリフト {
  0% {
    変換: skewY(10deg) translate3d(-250%, 0, 0);
    表示: ブロック;
  }
  100% {
    変換: skewY(-12deg) translate3d(250%, 0, 0);
    表示: ブロック;
  }
}
@keyframes ドリフト回転 {
  0% {
    変換: rotateX(0);
    表示: ブロック;
  }
  100% {
    変換: rotateX(359deg);
    表示: ブロック;
  }
}

完全なコードは記事の後のリンクでご覧いただけます🔗 。

CSS携帯電話の横画面を決定します

この例では、 50音小游戲アプリケーションはモバイルデバイス用に開発されており、PC スタイルには適応されていないため、横画面のガイダンスページを追加して、ユーザーに縦画面の使用を促すことができます。 CSSでモバイルデバイスがランドスケープモードになっているかどうかを判断するには、メディアクエリにaspect-ratioを使用する必要があります。これは、 viewportのアスペクト比をテストすることによって行われます。

aspect-ratio比プロパティは、 viewportのアスペクト比を表す<ratio>値として指定されます。これは範囲であり、 min-aspect-ratioとmax-aspect-ratioを使用してそれぞれ最小値と最大値を照会できます。基本的な構文は次のとおりです。

/* 最小アスペクト比 */
@media (最小アスペクト比: 8/5) {
  // ...
}
/* 最大アスペクト比 */
@media (最大アスペクト比: 3/2) {
  // ...
}
/* アスペクト比をクリアし、すべての条件が満たされたときに重なりを防ぐために下部に配置します */
@media (アスペクト比: 1/1) {
  // ...
}

アプリケーションでの具体的な実装方法は、 .mod_orient_layerガイドレイヤーを追加して非表示にし、最小アスペクト比に達したときに表示することです。

<div class="mod_orient_layer"></div>

.mod_orient_layer {
  表示: なし;
  位置: 固定;
  高さ: 100%;
  幅: 100%;
  左: 0;
  上: 0;
  右: 0;
  下部: 0;
  zインデックス: 999;
  背景: #FFFFFF url('landscape.jpg') 繰り返しなし 中央;
  背景サイズ: 自動 100%;
}
@media スクリーンと (最小アスペクト比: 13/8) {
  .mod_orient_layer {
    表示: ブロック;
  }
}

結果：

互換性

以下は、この記事で取り上げたいくつかの属性の互換性ビューです。実際の運用プロジェクトでは、互換性の適応に注意する必要があります。

Photoshopのスキル

ロゴデザイン

logo主に2つの要素で構成されています。⛩️アイコンと日本語のひらがな「あです。どちらも日本の古典的な要素です。同時に、あ⛩️れ、グラデーションになって⛩️に似た影を形成し、文字とグラフィックを巧みに結び付け、絵に調和をもたらします。ロゴの背景色にはアプリケーションテーマの背景色が使用され、ページとの目に見えない接続が確立され、全鏈路の統一されたスタイル標準が形成されます。（書き続けられない…😂）