說明
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>