響應式設計 - Tocas UI

響應式標籤

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

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

頁面字體縮放

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

	字體大小	適用情境
is-small	14px	手機或是行動裝置應用程式。
is-medium	15px	預設尺寸，基本的網頁和桌上型電腦的軟體介面。
is-large	16px	專注在文字的部落格、商業推廣情境。

<!-- 指定 `is-large` 會讓網頁使用 16px 字體基礎 -->
<html class="is-large">

中斷點尺寸

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

	狀態指示	當螢幕尺寸 .. 時	出現時機
mobile	目前	≥ 0px 和 ≤ 767px	⮃ 手機直向握持。
tablet	目前	≥ 768px 和 ≤ 1023px	⮂ 多數手機的橫向。 ⮃ 平板電腦的直向。
desktop	目前	≥ 1024px 和 ≤ 1279px	⮂ 平板電腦的橫向。縮小的瀏覽器視窗。通常可視為電腦裝置的起始點。
widescreen	目前	≥ 1280px	⮂ 大型平板電腦的橫向（如：iPad Pro 或 Surface Pro）。筆記型電腦、桌上型電腦。

使用方式

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

	範例	生效時機
中斷點	`mobile`	只在「某個中斷點」生效。
中斷點+	`mobile+`	在「某個中斷點」與「以上」生效。
中斷點-	`tablet-`	在「某個中斷點」與「以下」生效。
中斷點-中斷點	`tablet-widescreen`	在「某個中斷點」與「某個中斷點」之間生效。

<!-- 只在 mobile 套用 is-small -->
<div class="ts-button mobile:is-small"></div>

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

臨時尺寸

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

	範例	生效時機
[尺寸+]	`[450px]+`	在「某個尺寸」與「以上」生效。
[尺寸-]	`[800px]-`	在「某個尺寸」與「以下」生效。
[尺寸-尺寸]	`[300px-400px]`	在「某個尺寸」與「某個尺寸」之間生效。

<!-- 螢幕在 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>