響應式設計
協助你能夠在不同裝置上更加地得心應手。
說明

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] 屬性標籤能夠更改縮放級距。

手機或是行動裝置應用程式。
基本的網頁和桌上型電腦的軟體介面。
專注在文字的部落格、商業推廣情境。
<html data-scale="large">

在一般情況下,介面會以標準化規模呈現。當使用者的螢幕尺寸過小,僅會顯示最小化、最基礎的功能;當使用者的螢幕尺寸過大,那些多餘的輔助功能便可以出現在螢幕上。

將應用程式、網頁以這三個規模設計,便能更加簡單地清楚地描述頁面的功能。

說明
最小化介面,常出現於手機…等行動裝置。
標準化介面,通常是平板電腦或較小筆記型電腦…等。
最大化介面,適用於大部分的桌上型電腦與大型筆記型電腦的使用者。

透過 is-x-only 的輔助樣式可以讓某個元素在特定的介面尺寸下出現,如果不符合這個尺寸則永遠隱藏。

說明
只在最小化時出現。
只在標準化時出現。
只在最大化時出現。
<div class="is-standard-only">把響應式標籤這樣套用在任何元素上!</div>

透過 is-not-x 的輔助樣式讓某個元素在不是某個介面尺寸時才出現,與 is-x-only 是相反的設計。

說明
不是最小化的時候才出現。
不是標準化的時候才出現。
不是最大化的時候才出現。
<div class="is-not-minimal">這個元素只會在手機以外的裝置顯示。</div>
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n