媒體查詢的好處

Unlocking the Potential of Data at Australia Data Forum
Post Reply
subornaakter93
Posts: 48
Joined: Tue Dec 17, 2024 3:44 am

媒體查詢的好處

Post by subornaakter93 »

您可以為網站在行動裝置(或小瀏覽器視窗)上顯示時建立自訂樣式,而在桌上型電腦上將保留熟悉的網頁外觀。這需要媒體查詢中的目標樣式,以下是一個範例:

避免固定定位
如果標題或側邊欄固定定位,則 CSS 位置屬性設為固定,我們建議您小心。

在這種情況下,在創建標記時,標題的 馬來西亞手機號 大小將與頁面成比例增加,也就是說,它甚至可以佔據整個螢幕:

網站針對行動裝置的適配_媒體查詢

使網站適應行動裝置的最簡單方法是在行動裝置上顯示時放棄固定位置。

Image


一個例子展示了它在實踐中是如何運作的:

使用標準字體
由於採用了自訂字體,該網站看起來昂貴且專業。但同時,訪客必須下載字型檔案 - 此操作是在使用者可以看到網站之前執行的。

通常,此類文件很大,這意味著在行動裝置上下載它們需要很長時間。門戶訪客會看到什麼?未填空間:

網站針對行動裝置的適配_fonts

透過使用 Google Font Loader 使網站適應行動設備,在載入自訂版本時,將顯示標準字體的文字。接下來,您再次產生頁面,訪客將看到最初選擇的字體。

但是您必須編寫兩個版本的 CSS 規則:第一個用於預設字體,另一個用於下載的字體。

相信我,這個解決方案將是最佳的:一個人將在下載字體時閱讀他需要的所有內容,然後將有機會看到設計。使用以下程式碼:


我們強調: .wf-opensans-n4-active 類別選擇器由字體載入器動態添加到網站程式碼中,但僅在載入字體時才新增。

提供用戶可讀內容
通常,行動裝置使用者會出於特定目的存取網際網路。例如,如果他們想比較不同商店中產品的成本,請尋找沙龍的聯絡資訊以及使用藥物的說明。

因此,當標題吸引他們時,他們就會出現在您的網站上。接下來,對他們來說重要的是發現準備在小螢幕上閱讀的內容。

為了用英文描述這條規則,有一個相當簡潔的字「snackable」(來自英文「snack」 - 零食)。因此,針對此類用戶的內容應該是快餐式的,即方便在移動時快速閱讀和快速查看。

讓我們概述一下在為螢幕閱讀器調整行動裝置網站時需要考慮的主要功能:

從一個簡短、簡潔、有吸引力的標題開始。我們建議您將其控制在 10 個字以內,並使用大字體。

將文字分成幾個區塊,每個區塊都必須以一個簡短、資訊豐富的副標題開頭,該副標題在整體背景下脫穎而出。

在文字中插入編號/項目符號列表,以幫助行動用戶快速找到他們需要的內容。

使用視覺插入,進一步結構化資訊並簡化感知。
Post Reply