此版本 (4.2) 已經過時,點擊此處檢視最新版本 (5.0)
台灣正體

響應式設計

協助你能夠在不同裝置上更加地得心應手。
前置準備

必須在 HTML 的 <head> .. </head> 處聲明下列標籤來告訴行動裝置此網頁支援響應式設計。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Tocas UI 的所有元件字體大小是依賴著網頁基底而定。當網頁字型太小時,不需要變更每個元件的字型,可以直接變更 <html> 中的 font-size 大小設定。

適用情境
手機或是行動裝置應用程式。
預設尺寸,基本的網頁和桌上型電腦的軟體介面。
專注在文字的部落格、商業推廣情境。
<!-- 指定 `is-large` 會讓網頁使用 16px 字體基礎 -->
<html class="is-large">
響應式系統

預設的響應式系統提供這些裝置中斷點:行動裝置(Mobile)、平板(Tablet)、桌上型電腦(Desktop)、大型螢幕(Widescreen)。

出現時機
⮃ 手機直向握持。
⮂ 多數手機的橫向。
⮃ 平板電腦的直向。
⮂ 平板電腦的橫向。
縮小的瀏覽器視窗。
通常可視為電腦裝置的起始點。
⮂ 大型平板電腦的橫向(如:iPad Pro 或 Surface Pro)。
筆記型電腦、桌上型電腦。

在 Tocas UI 裡面,透過套用 中斷點:樣式 來實現響應式設計。

生效時機
只在「某個中斷點」生效。
在「某個中斷點」與「以上」生效。
在「某個中斷點」與「以下」生效。
在「某個中斷點」與「某個中斷點」之間生效。
<!-- 只在 mobile 套用 is-small -->
<div class="ts-button mobile:is-small"></div>

<!-- 在 tablet, desktop, widescreen 套用 is-small -->
<div class="ts-button tablet+:is-small"></div>

透過方括號 [尺寸] 取代原本的中斷點名稱來使用一些沒有意義的尺寸,例如:123px450px 這種臨時尺寸。

生效時機
在「某個尺寸」與「以上」生效。
在「某個尺寸」與「以下」生效。
在「某個尺寸」與「某個尺寸」之間生效。
<!-- 螢幕在 300px 或以下套用 is-small -->
<div class="ts-button [300px]-:is-small"></div>

<!-- 螢幕在 300px 到 400px 之間套用 is-small -->
<div class="ts-button [300px-400px]:is-small"></div>
實際應用
網格系統

欄位所佔的格數寬度可以依據裝置而有所不同。Tocas UI 不是行動優先(Mobile First)框架,在 mobile 中斷點設置的樣式並不會自動往上套用。

<div class="ts-grid">
    <div class="column mobile:is-16-wide tablet+:is-8-wide"></div>
    <div class="column mobile:is-16-wide tablet+:is-8-wide"></div>
    <div class="column mobile:is-16-wide tablet+:is-8-wide"></div>
    <div class="column mobile:is-16-wide tablet+:is-8-wide"></div>
</div>

透過切換某個元素的 has-hidden 樣式,可以在某些裝置上隱藏元素。has-hidden 是會隱藏元素的全域輔助函式,更多用法請參考輔助樣式頁面。

Tocas UI 目前的設計偏好「在什麼時候隱藏」而不是「在什麼時候顯示」,這點需要額外注意。

Mobile 📱
Tablet 💻
Desktop 🖥️
Widescreen 📺
<!-- 在 tablet, desktop, widescreen 隱藏 -->
<!-- 等同於:只在 mobile 顯示 -->
<div class="ts-badge tablet+:has-hidden">Mobile 📱</div>

<!-- 在 mobile, desktop, widescreen 隱藏 -->
<!-- 等同於:只在 tablet 顯示 -->
<div class="ts-badge mobile:has-hidden desktop+:has-hidden">Tablet 💻</div>

<!-- 在 mobile, tablet, widescreen 隱藏 -->
<!-- 等同於:只在 desktop 顯示 -->
<div class="ts-badge tablet-:has-hidden widescreen:has-hidden">Desktop 🖥️</div>

<!-- 在 mobile, tablet, desktop 隱藏 -->
<!-- 等同於:只在 widescreen 顯示 -->
<div class="ts-badge desktop-:has-hidden">Widescreen 📺</div>
進階功能

透過覆寫 CSS 變數來編輯預設的 Tocas UI 中斷點尺寸、名稱甚至是新增中斷點。這些設定預設寫在 html 的 CSS 樣式中。新增中斷點時,必須同時新增兩個 CSS 變數:

--ts-breakpoint-名稱-min:該中斷點的最小、起始尺寸。
--ts-breakpoint-名稱-min:該中斷點的最大、結束尺寸。

套用響應式功能時,Tocas UI 會找離這個元素最近的中斷點定義。

<style type="text/css">
    html {
        /** 建立名為 computer 的中斷點 */
        --ts-breakpoint-computer-min: 768px;
        --ts-breakpoint-computer-max: 1280px;
    }
</style>

<!-- 螢幕在 768px ~ 1280px 之間套用 is-small 樣式 -->
<div class="ts-button computer:is-small"></div>

預設的中斷點或尺寸是依據視窗寬度生效,但也能改為依據某個容器的寬度,這個功能也稱作 Container Query。

在中斷點或尺寸前面加上 @(例如:@mobile@[400px]+)這些元素就會依據最鄰近的 @container 容器的寬度來做為響應式的判斷依據。

<div class="ts-segment @container">
    <!-- 如果 ts-segment 的寬度在 300px 或以上就套用 is-small -->
    <div class="ts-button @[300px+]:is-small"></div>
</div>
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標