五十音小游戲中的前端知識小結(jié)

更新時間：2021年10月18日 16:36:23 作者：Dragonir

本文內(nèi)容主要介紹小游戲開發(fā)流中程涉及到的前端知識的如深色模式、離線緩存、櫻花動畫、橫屏判斷等知識的歸納介紹和個人收獲總結(jié)，感興趣的朋友一起看看吧

背景

在日語學(xué)習(xí)初期階段，我發(fā)現(xiàn)日語五十音的記憶并不是很容易的，片假名的記憶尤其令人費(fèi)神。這時我想如果有一個應(yīng)用可以充分利用碎片時間，在午休或地鐵上隨時可以練習(xí)五十音該多好。于是搜索 App Store，確實有很多五十音學(xué)習(xí)的小軟件，但是商店的軟件不是含有內(nèi)購、夾帶廣告、就是動輒 40M 以上，沒找到一個自己滿意的應(yīng)用。于是打算自己寫一個，主要介紹自己在開發(fā)設(shè)計該應(yīng)用過程中的一些收獲。

實現(xiàn)

在線體驗地址 https://dragonir.github.io/kanaApp/

實現(xiàn)效果如下，該應(yīng)用主要分為三個頁面：

首頁：包括菜單選項（平假名練習(xí)、片假名練習(xí)、混合練習(xí)）、深色模式切換按鈕。
答題頁：包括剩余機(jī)會和分?jǐn)?shù)顯示區(qū)、中間出題區(qū)、底部答題按鈕。
結(jié)果頁：結(jié)果分?jǐn)?shù)顯示和返回首頁按鈕。

答題邏輯規(guī)則是從給出的 4 個答案按鈕中選出題目展示區(qū)的那個單詞對應(yīng)正確的那個選項，應(yīng)用根據(jù)點擊給出錯對反饋并進(jìn)行記分，錯誤 10 次后游戲結(jié)束，加載結(jié)果頁。游戲邏輯實現(xiàn)不是本文的主要內(nèi)容，因此后面不再贅述。本文后續(xù)主要內(nèi)容是此次小游戲開發(fā)流程涉及到的前端知識的介紹。

深色模式 ⚪⚫

隨著 Windows 10、 MacOs、 Android 等系統(tǒng)陸續(xù)推出深色模式，瀏覽器也開始支持檢測系統(tǒng)主題色配置，越來越多的網(wǎng)頁應(yīng)用都配置了深色模式切換功能。為了優(yōu)化 50音小游戲 的視覺體驗，我也配置了深色樣式，實現(xiàn)效果如下：

CSS 媒體查詢判斷深色模式

prefers-color-scheme 媒體特性用于檢測用戶是否有將系統(tǒng)的主題色設(shè)置為亮色或者暗色。使用語法如下所示：

@media (prefers-color-scheme: value) {} 其中 value 有以下 3 種值，其中：

light：表示用戶系統(tǒng)支持深色模式，并且已設(shè)置為淺色主題（默認(rèn)值）。
dark：表示用戶系統(tǒng)支持深色模式，并且已設(shè)置為深色主題。
no-preference：表示用戶系統(tǒng)不支持深色模式或無法得知是否設(shè)置為深色模式（已廢棄）。

若結(jié)果為 no-preference，無法通過此媒體特性獲知宿主系統(tǒng)是否支持設(shè)置主題色，或者用戶是否主動將其設(shè)置為無偏好。出于隱私保護(hù)等方面的考慮，用戶或用戶代理也可能在一些情況下在瀏覽器內(nèi)部將其設(shè)置為 no-preference。

下面例子中，當(dāng)系統(tǒng)主題色為深色時 .demo 元素的背景色為 #FFFFFF；當(dāng)系統(tǒng)主題色為淺色時，.demo 元素的背景色為 #000000。

@media (prefers-color-scheme: dark) {
  .demo { background:  #FFFFFF; }
}
@media (prefers-color-scheme: light) {
  .demo { background: #000000; }
}

JavaScript 判斷深色模式

window.matchMedia() 方法返回一個新的 MediaQueryList 對象，表示指定的媒體查詢 (en-US)字符串 解析后的結(jié)果。返回的 MediaQueryList 可被用于判定 Document 是否匹配媒體查詢，或者監(jiān)控一個 document 來判定它匹配了或者停止匹配了此媒體查詢。其中 MediaQueryList 對象具有屬性 matches和 media，方法 addListener 和 removeListener。

使用 matchMedia 作為判斷媒介，也可以識別系統(tǒng)是否支持主題色：

if (window.matchMedia('(prefers-color-scheme)').media === 'not all') {
  // 瀏覽器不支持主題色設(shè)置
}
if (window.matchMedia('(prefers-color-scheme: dark)').matches){
  // 深色模式
} else {
  // 淺色模式
}

另外還可以動態(tài)監(jiān)聽系統(tǒng)深色模式的狀態(tài)，根據(jù)系統(tǒng)深色模式的切換做出實時響應(yīng)：

window.matchMedia('(prefers-color-scheme: dark)').addListener(e => {
  if (e.matches) {
    // 開啟深色模式
  } else {
    // 關(guān)閉深色模式
  }
});

或者單獨檢測深色或淺色模式：

const listeners = {
  dark: (mediaQueryList) => {
    if (mediaQueryList.matches) {
      // 開啟深色模式
    }
  },
  light: (mediaQueryList) => {
    if (mediaQueryList.matches) {
      // 開啟淺色模式
    }
  }
};
window.matchMedia('(prefers-color-scheme: dark)').addListener(listeners.dark);
window.matchMedia('(prefers-color-scheme: light)').addListener(listeners.light);

在50音小游戲中，就是使用 JavaScript 檢測系統(tǒng)是否開啟深色模式，動態(tài)添加 css 類名來自動加載深色模式，同時也提供深淺色切換按鈕，可以手動切換主題。

HTML 元素中判斷深色模式

頁面使用圖片元素時，可以直接在 HTML 中判斷系統(tǒng)是否開啟深色模式。如：

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

picture 元素允許我們在不同的設(shè)備上顯示不同的圖片，一般用于響應(yīng)式。HTML5 引入了 <picture> 元素，該元素可以讓圖片資源的調(diào)整更加靈活。<picture> 元素零或多個 <source> 元素和一個 <img> 元素，每個 <source> 元素匹配不同的設(shè)備并引用不同的圖像源，如果沒有匹配的，就選擇 <img> 元素的 src 屬性中的 url。

注意: <img> 元素是放在最后一個 <picture> 元素之后，如果瀏覽器不支持該屬性則顯示 <img> 元素的的圖片。

離線緩存

為了能夠像原生應(yīng)用一樣可以在桌面生成快捷方式快速訪問，隨時隨地離線使用，50音小游戲 使用了離線緩存技術(shù)，它是一個 PWA應(yīng)用 。下面內(nèi)容是 PWA離線應(yīng)用 實現(xiàn)技術(shù)的簡要描述。

PWA (progressing web app)，漸進(jìn)式網(wǎng)頁應(yīng)用程序，是 下一代WEB應(yīng)用模型。一個 PWA 應(yīng)用首先是一個網(wǎng)頁, 并借助于 App Manifest 和 Service Worker 來實現(xiàn)安裝和離線等功能。

特點：

漸進(jìn)式：適用于選用任何瀏覽器的所有用戶，因為它是以漸進(jìn)式增強(qiáng)作為核心宗旨來開發(fā)的。
自適應(yīng)：適合任何機(jī)型：桌面設(shè)備、移動設(shè)備、平板電腦或任何未來設(shè)備。
連接無關(guān)性：能夠借助于服務(wù)工作線程在離線或低質(zhì)量網(wǎng)絡(luò)狀況下工作。
離線推送：使用推送消息通知，能夠讓我們的應(yīng)用像 Native App 一樣，提升用戶體驗。及時更新：在服務(wù)工作線程更新進(jìn)程的作用下時刻保持最新狀態(tài)。
安全性：通過 HTTPS 提供，以防止窺探和確保內(nèi)容不被篡改。

配置頁面參數(shù)

在項目根目錄添加文件 manifest.webmanifest 或 manifest.json 文件，并在文件內(nèi)寫入如下配置信息，本例中 50音小游戲 的頁面參數(shù)信息配置如下：

// manifest.webmainifest
{
  "name": "かなゲーム",
  "short_name": "かなゲーム",
  "start_url": "index.html",
  "display": "standalone",
  "background_color": "#fff",
  "description": "かなゲーム",
  "icons": [
    {
      "src": "assets/images/icon-64x64.jpg",
      "sizes": "64x64",
      "type": "image/jpg"
    },
    {
      "src": "assets/images/icon-256x256.jpg",
      "sizes": "256x256",
      "type": "image/jpg"
    }
  ]
}

參數(shù)說明：

name：Web App 的名稱，也是保存到桌面上時應(yīng)用圖標(biāo)的名稱。
short_name：name 過長時，將會使用 short_name 代替 name 顯示，是 Web App 的簡稱。
start_url：指定了用戶打開該 Web App 時加載 URL。URL 會相對于 manifest 文件所在路徑。
display：指定了應(yīng)用的顯示模式，它有四個值可以選擇：

fullscreen：全屏顯示，會盡可能將所有的顯示區(qū)域都占滿。

standalone：瀏覽器相關(guān) UI（如導(dǎo)航欄、工具欄等）將被隱藏，看起來更像一個 Native App。

minimal-ui：顯示形式與 standalone 類似，瀏覽器相關(guān) UI 會最小化為一個按鈕，不同瀏覽器在實現(xiàn)上略有不同。browser：一般來說，會和正常使用瀏覽器打開樣式一致。

需要說明的是，當(dāng)一些系統(tǒng)的瀏覽器不支持 fullscreen 時將會顯示成 standalone 效果，當(dāng)不支持 standalone 時，將會顯示成 minimal-ui 的效果，以此類推。

description：應(yīng)用描述。

icons：指定了應(yīng)用的桌面圖標(biāo)和啟動頁圖像，用數(shù)組表示：

sizes：圖標(biāo)大小。通過指定大小，系統(tǒng)會選取最合適的圖標(biāo)展示在相應(yīng)位置上。
src：圖標(biāo)路徑。相對路徑是相對于 manifest 文件，也可以使用絕對路徑。
type：圖標(biāo)圖片類型。瀏覽器會從 icons 中選擇最接近 128dp(px = dp * (dpi / 160)) 的圖片作為啟動畫面圖像。

background_color：指定啟動畫面的背景顏色，采用相同顏色可以實現(xiàn)從啟動畫面到首頁的平穩(wěn)過渡，也可以用來改善頁面資源正在加載時的用戶體驗。

theme_color：指定了Web App 的主題顏色?？梢酝ㄟ^該屬性來控制瀏覽器 UI 的顏色。比如狀態(tài)欄、內(nèi)容頁中狀態(tài)欄、地址欄的顏色。

配置信息自動生成工具：https://tomitm.github.io/appmanifest/

配置 HTML 文件

在 index.html 中引入 manifest 配置文件，并在 head 中添加以下配置信息以兼容 iOS系統(tǒng)

<meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover">
<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="stylesheet" type="text/css" href="./assets/css/main.css" rel="external nofollow" >
<link rel="stylesheet" type="text/css" href="./assets/css/dark.css" rel="external nofollow" >
<link rel="stylesheet" type="text/css" href="./assets/css/petals.css" rel="external nofollow" >
<link rel="shortcut icon" href="./assets/images/icon-256x256.jpg" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
<link rel="apple-touch-icon" href="./assets/images/icon-256x256.jpg" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" />
<link rel="apple-touch-icon-precomposed" href="./assets/images/icon-256x256.jpg" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
<link rel="Bookmark" href="./assets/images/icon-256x256.jpg" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  />
<link rel="manifest" href="./manifest.webmanifest" rel="external nofollow" >
<title>かなゲーム</title>

apple-touch-icon: 指定應(yīng)用圖標(biāo)，類似與 manifest.json 文件的 icons 配置，也是支持 sizes 屬性，來供不同場景的選擇。
apple-mobile-web-app-capable：類似于 manifest.json 中的 display 的功能，通過設(shè)置為 yes 可以進(jìn)入 standalone 模式。
apple-mobile-web-app-title：指定應(yīng)用的名稱。
apple-mobile-web-app-status-bar-style：指定iOS移動設(shè)備的 狀態(tài)欄status bar 的樣式，有 Default，Black，Black-translucent 可以設(shè)置。

注冊使用 Service Worker

在 index.html 中添加如下代碼進(jìn)行server-worker注冊：

window.addEventListener('load', () => {
  registerSW();
});
async function registerSW() {
  if ('serviceWorker' in navigator) {
    try {
      await navigator.serviceWorker.register('./sw.js');
    } catch (e) {
      console.log(`SW registration failed`);
    }
  }
}

使用 serviceWorkerContainer.register() 進(jìn)行 Service worker 注冊，同時添加 try...catch... 容錯判斷，以保證在不支持 Service worker 的情況下正常運(yùn)行。另外需要注意的是只有在 https 下，navigator 里才會有 serviceWorker 對象。

Service workers 本質(zhì)上充當(dāng) Web 應(yīng)用程序、瀏覽器與網(wǎng)絡(luò)（可用時）之間的代理服務(wù)器。旨在創(chuàng)建有效的離線體驗，它會攔截網(wǎng)絡(luò)請求并根據(jù)網(wǎng)絡(luò)是否可用采取來適當(dāng)?shù)膭幼?、更新來自服?wù)器的的資源。它還提供入口以推送通知和訪問后臺同步 API。了解更多 Service workder 知識可以訪問文章末尾鏈接 🔗。

在根目錄添加 sw.js，定義緩存信息和方法

// 定義緩存的key值
const cacheName = 'kana-v1';
// 定義需要緩存的文件
const staticAssets = [
  './',
  './index.html',
  './assets/css/main.css',
  './assets/js/main.js',
  './assets/images/bg.jpg'
  // ...
];

// 監(jiān)聽install事件，安裝完成后，進(jìn)行文件緩存
self.addEventListener('install', async e => {
  // 找到key對應(yīng)的緩存并且獲得可以操作的cache對象
  const cache = await caches.open(cacheName);
  // 將需要緩存的文件加進(jìn)來
  await cache.addAll(staticAssets);
  return self.skipWaiting();
});

// 監(jiān)聽activate事件來更新緩存數(shù)據(jù)
self.addEventListener('activate', e => {
  // 保證第一次加載fetch觸發(fā)
  self.clients.claim();
});

// 監(jiān)聽fetch事件來使用緩存數(shù)據(jù)：
self.addEventListener('fetch', async e => {
  const req = e.request;
  const url = new URL(req.url);
  if (url.origin === location.origin) {
    e.respondWith(cacheFirst(req));
  } else {
    e.respondWith(networkAndCache(req));
  }
});

async function cacheFirst(req) {
  // 判斷當(dāng)前請求是否需要緩存
  const cache = await caches.open(cacheName);
  const cached = await cache.match(req);
  // 有緩存就用緩存，沒有就從新發(fā)請求獲取
  return cached || fetch(req);
}

async function networkAndCache(req) {
  const cache = await caches.open(cacheName);
  try {
    // 緩存報錯還直接從新發(fā)請求獲取
    const fresh = await fetch(req);
    await cache.put(req, fresh.clone());
    return fresh;
  } catch (e) {
    const cached = await cache.match(req);
    return cached;
  }
}

在 sw.js 中采用的標(biāo)準(zhǔn)的 web worker 的編程方式，由于運(yùn)行在另一個全局上下文中 （self），這個全局上下文不同于 window，所以采用 self.addEventListener()。

Cache API 是 Service Worker 提供用來操作緩存的的接口，這些接口基于 Promise 實現(xiàn)，包括 Cache 和 Cache Storage，Cache 直接和請求打交道，為緩存的 Request / Response 對象對提供存儲機(jī)制，CacheStorage 表示 Cache 對象的存儲實例，我們可以直接使用全局的 caches 屬性訪問 Cache API。

** Cache 相關(guān) API 說明：

Cache.match(request, options)：返回一個 Promise 對象，resolve 的結(jié)果是跟 Cache 對象匹配的第一個已經(jīng)緩存的請求。
Cache.matchAll(request, options)：返回一個 Promise 對象，resolve 的結(jié)果是跟 Cache 對象匹配的所有請求組成的數(shù)組。Cache.addAll(requests)：接收一個 URL 數(shù)組，檢索并把返回的 response 對象添加到給定的 Cache 對象。
Cache.delete(request, options)：搜索 key 值為 request 的 Cache 條目。如果找到，則刪除該 Cache 條目，并且返回一個 resolve 為 true 的 Promise 對象；如果未找到，則返回一個 resolve 為 false 的 Promise 對象
Cache.keys(request, options)：返回一個 Promise 對象，resolve 的結(jié)果是 Cache 對象 key 值組成的數(shù)組。

注：使用 request.clone() 和 response.clone() 是因為 request 和 response 是一個流，只能消耗一次。緩存時已經(jīng)消耗一次，再發(fā)起 HTTP 請求還要消耗一次，此時使用 clone 方法克隆請求。

至此，當(dāng)已安裝的 Service Worker 頁面被打開時，便會觸發(fā) Service Worker 腳本更新。當(dāng)上次腳本更新寫入 Service Worker 數(shù)據(jù)庫的時間戳與本次更新超過 24小時，便會觸發(fā) Service Worker 腳本更新。當(dāng) sw.js 文件改變時，便會觸發(fā) Service Worker 腳本更新。更新流程與安裝類似，只是在更新安裝成功后不會立即進(jìn)入 active 狀態(tài)，更新后的 Service Worker 會和原始的 Service Worker 共同存在，并運(yùn)行它的 install，一旦新 Service Worker 安裝成功，它會進(jìn)入 wait 狀態(tài)，需要等待舊版本的 Service Worker 進(jìn)/線程終止。

更多 Server Worker 進(jìn)階知識可以查看文章末尾鏈接 🔗

實現(xiàn)效果：

PC端 🖥️：Windows上，在瀏覽器中初次打開應(yīng)用后會有安裝提示，點擊安裝圖標(biāo)之后進(jìn)行安裝，桌面和開始菜單中會生成應(yīng)用快捷方式，點擊快捷方式就可以打開應(yīng)用。

Mac 💻：上面 chromiumn內(nèi)核 的瀏覽器（chrome、opera、新版edge）也是類似的。安裝之后會在 launchpad 中生成快捷方式。

移動端 📱：iPhone。瀏覽器中選擇保存到桌面，就可生成桌面圖標(biāo)，點擊圖標(biāo)打開離線應(yīng)用。

櫻花飄落動畫 🌸

為增強(qiáng)視覺效果和趣味性，于是在頁面增加了櫻花 🌸 飄落的效果。飄落效果動畫主要使用到 Element.animate() 方法。

Element 的 animate() 方法是一個創(chuàng)建新 Animation 的便捷方法，將它應(yīng)用于元素，然后運(yùn)行動畫。它將返回一個新建的 Animation 對象實例。一個元素上可以應(yīng)用多個動畫效果。你可以通過調(diào)用此函數(shù)獲得這些動畫效果的一個列表： Element.getAnimations()。

基本語法：

var animation = element.animate(keyframes, options);

參數(shù)：

keyframes：關(guān)鍵幀。一個對象，代表關(guān)鍵幀的一個集合。
options：可選項代表動畫持續(xù)時間的整形數(shù)字 (以毫秒為單位), 或者一個包含一個或多個時間屬性的對象：

id：可選，在 animate() 里可作為唯一標(biāo)識的屬性: 一個用來引用動畫的字符串（ DOMString ）delay：可選，開始時間的延遲毫秒數(shù)，默認(rèn)值為 0。

direction：可選，動畫的運(yùn)動方向。向前運(yùn)行 normal、向后運(yùn)行 reverse、每次迭代后切換方向 alternate，向后運(yùn)行并在每次迭代后切換方向 alternate-reverse。默認(rèn)為 normal。

duration：可選，動畫完成每次迭代的毫秒數(shù)，默認(rèn)值為 0。easing：可選，動畫隨時間變化的頻率。接受預(yù)設(shè)的值包括 linear、ease、 ease-in、ease-out、ease-in-out及一個自定義值 cubic-bezier，如 cubic-bezier(0.42, 0, 0.58, 1)。默認(rèn)值為 linear。

endDelay：可選，一個動畫結(jié)束后的延遲，默認(rèn)值為 0。

fill：可選，定義動畫效果對元素的影響時機(jī)，backwards 動畫開始前影響到元素上、 forwards 動畫完成后影響到元素上、both 兩者兼具。默認(rèn)值為 none。

iterationStart：可選，描述動畫應(yīng)該在迭代中的哪個點開始。例如，0.5 表示在第一次迭代中途開始，并且設(shè)置此值后，具有 2 次迭代的動畫將在第三次迭代中途結(jié)束。默認(rèn)為 0.0。

iterations：可選，動畫應(yīng)該重復(fù)的次數(shù)。默認(rèn)為 1，也可以取 infinity 的值，使其在元素存在時重復(fù)。

以下代碼為本例中的具體實現(xiàn)，HTML中有若干個 .petal 元素，然后 JavaScript 中獲取到所有 .petal 元素添加隨機(jī)動畫，css中添加兩種旋轉(zhuǎn)和變形兩種動畫，實現(xiàn)櫻花花瓣飄落的效果。

<div id="petals_container">
  <div class="petal"></div>
  <!-- ... -->
  <div class="petal"></div>
</div>

var petalPlayers = [];
function animatePetals() {
  var petals = document.querySelectorAll('.petal');
  if (!petals[0].animate) {
    var petalsContainer = document.getElementById('petals_container');
    return false;
  }
  for (var i = 0, len = petals.length; i < len; ++i) {
    var petal = petals[i];
    petal.innerHTML = '<div class="rotate"><img src="petal.jpg" class="askew"></div>';
    var scale = Math.random() * .6 + .2;
    var player = petal.animate([{
        transform: 'translate3d(' + (i / len * 100) + 'vw,0,0) scale(' + scale + ')',
        opacity: scale
      },
      {
        transform: 'translate3d(' + (i / len * 100 + 10) + 'vw,150vh,0) scale(' + scale + ')',
        opacity: 1
      }
    ], {
      duration: Math.random() * 90000 + 8000,
      iterations: Infinity,
      delay: -(Math.random() * 5000)
    });
    petalPlayers.push(player);
  }
}
animatePetals();

.petal .rotate {
  animation: driftyRotate 1s infinite both ease-in-out;
  perspective: 1000;
}
.petal .askew {
  transform: skewY(10deg);
  display: block;
  animation: drifty 1s infinite alternate both ease-in-out;
  perspective: 1000;
}
.petal:nth-of-type(7n) .askew {
  animation-delay: -.6s;
  animation-duration: 2.25s;
}
.petal:nth-of-type(7n + 1) .askew {
  animation-delay: -.879s;
  animation-duration: 3.5s;
}
/* ... */
.petal:nth-of-type(9n) .rotate {
  animation-duration: 2s;
}
.petal:nth-of-type(9n + 1) .rotate {
  animation-duration: 2.3s;
}
/* ... */
@keyframes drifty {
  0% {
    transform: skewY(10deg) translate3d(-250%, 0, 0);
    display: block;
  }
  100% {
    transform: skewY(-12deg) translate3d(250%, 0, 0);
    display: block;
  }
}
@keyframes driftyRotate {
  0% {
    transform: rotateX(0);
    display: block;
  }
  100% {
    transform: rotateX(359deg);
    display: block;
  }
}

完整代碼可查看文后鏈接 🔗。

CSS 判斷手機(jī)橫屏

本例 50音小游戲 應(yīng)用是針對移動端開發(fā)，未作pc端的樣式適配，所以可以添加一個橫屏引導(dǎo)頁面提示用戶使用豎屏。在 CSS 中判斷移動設(shè)備是否處于橫屏狀態(tài)，需要用到 aspect-ratio 進(jìn)行媒體查詢，通過測試 viewport 的寬高比來進(jìn)行判斷。

aspect-ratio寬高比屬性被指定為 <ratio> 值來代表 viewport 的寬高比。其為一個范圍，可以使用 min-aspect-ratio 和 max-aspect-ratio 分別查詢最小和最大值?；菊Z法如下：

/* 最小寬高比 */
@media (min-aspect-ratio: 8/5) {
  // ...
}
/* 最大寬高比 */
@media (max-aspect-ratio: 3/2) {
  // ...
}
/* 明確的寬高比, 放在最下部防止同時滿足條件時的覆蓋 */
@media (aspect-ratio: 1/1) {
  // ...
}

在應(yīng)用中的具體實現(xiàn)方式是添加一個 .mod_orient_layer 引導(dǎo)層并隱藏，當(dāng)達(dá)到最小寬高比時將其顯示：

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

.mod_orient_layer {
  display: none;
  position: fixed;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: #FFFFFF url('landscape.jpg') no-repeat center;
  background-size: auto 100%;
}
@media screen and (min-aspect-ratio: 13/8) {
  .mod_orient_layer {
    display: block;
  }
}

實現(xiàn)效果：

兼容性

下面是本文中涉及的幾個屬性的兼容性視圖，在實際生產(chǎn)項目中需要注意兼容性適配。

Photoshop 技能

logo設(shè)計

logo 主要由兩個元素構(gòu)成由一個 ⛩️ 圖標(biāo)和日語平假名 あ 構(gòu)成，都是經(jīng)典的日系元素，同時對 あ 進(jìn)行拉伸漸變，形成類似 ⛩️ 的陰影，使字母和圖形巧妙連接在一起，使畫面和諧。logo背景色使用應(yīng)用主題背景色，與頁面在無形之中建立聯(lián)系，形成 全鏈路 統(tǒng)一風(fēng)格標(biāo)準(zhǔn)。（編不下去了。。。😂