說明
Tocas UI 內建數個響應式輔助樣式,這可以協助你在指定裝置上顯示或是隱藏一些元素。
現今的瀏覽裝置尺寸變得十分多樣,以往像 Semantic UI 那樣以平板、手機、桌機…等稱呼都已經不合時宜。好比 iPad Pro 的螢幕尺寸已經近似於筆記型電腦,那麼我們就不能再以「平板」來稱呼這個裝置。
Tocas UI 將響應式設計的輔助樣式命名為三個最重要的尺寸規模:最小化(Minimal)、預設(Standard)、最大化(Maximal)。
- 最小化介面:通常僅會有最基礎的功能。
- 標準化介面:呈現所有基本功能。
- 最大化介面:除了基本功能外還會帶有進階功能介面。
Tocas UI 支援響應式設計,為此需要新增下列一段的標籤在 HTML 來告訴行動裝置此網頁支援響應式設計。利用這個標籤還可以降低並解決行動裝置對於網頁的點擊延遲,請將這段放置於 HTML 中的 <head> .. </head>
處。
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Tocas UI 的所有元件字體大小是依賴著網頁基底而定。當網頁字型太小時,不需要變更每個元件的字型,可以直接變更 <html>
中的 font-size
大小設定,但 Tocas UI 也內建了 [data-scale]
屬性標籤能夠更改縮放級距。
字體大小 | 適用情境 | |
---|---|---|
small | 14px | 手機或是行動裝置應用程式。 |
medium | 15px | 基本的網頁和桌上型電腦的軟體介面。 |
large | 16px | 專注在文字的部落格、商業推廣情境。 |
<html data-scale="large">
在一般情況下,介面會以標準化規模呈現。當使用者的螢幕尺寸過小,僅會顯示最小化、最基礎的功能;當使用者的螢幕尺寸過大,那些多餘的輔助功能便可以出現在螢幕上。
將應用程式、網頁以這三個規模設計,便能更加簡單地清楚地描述頁面的功能。
狀態指示 | 當螢幕尺寸 .. 時 | 說明 | |
---|---|---|---|
Minimal |
目前
|
< 766px | 最小化介面,常出現於手機…等行動裝置。 |
Standard |
目前
|
≥ 766px 和 < 993px | 標準化介面,通常是平板電腦或較小筆記型電腦…等。 |
Maximal |
目前
|
≥ 993px | 最大化介面,適用於大部分的桌上型電腦與大型筆記型電腦的使用者。 |
透過 is-x-only
的輔助樣式可以讓某個元素在特定的介面尺寸下出現,如果不符合這個尺寸則永遠隱藏。
狀態指示 | 當螢幕尺寸 .. 時出現 | 說明 | |
---|---|---|---|
is-minimal-only |
目前
|
< 766px | 只在最小化時出現。 |
is-standard-only |
目前
|
≥ 766px 和 < 993px | 只在標準化時出現。 |
is-maximal-only |
目前
|
≥ 993px | 只在最大化時出現。 |
<div class="is-standard-only">把響應式標籤這樣套用在任何元素上!</div>