Zittme 在既有的 PC / 行動版兩種模式之外，新增了響應式。本文說明兩件事：網站依畫面寬度改變行為的響應式檢視，以及製作者聲明自己的面板・版面為響應式的響應式顯示。

什麼是響應式檢視

既有引擎以裝置類型（是否為手機）來判斷 PC/行動版。響應式檢視則改以畫面寬度為判斷基準。

• 直接沿用同一個面板（PC 用標記），
• 當畫面寬度縮小到 768px 以下時，引擎會套用行動版的設定值：編輯器設定、列表數量、分頁數量、頁首/頁尾文字。

也就是說，不必另外製作行動版面板，也能自動套用適合窄畫面的設定。這是實驗性功能，預設為關閉。

判斷基準寬度為 768px（Mobile::NARROW_BREAKPOINT、common/js/responsive-view.js 的 BREAKPOINT）。面板可以自由使用其他中斷點，但您需要知道引擎的設定值會在這個邊界切換。

響應式顯示：給面板・版面製作者

為什麼需要顯示

過去以資料夾作為區分：skins/ 是 PC 用，m.skins/ 是行動版專用。但響應式面板並不是與 PC 面板不同的東西，而是「該面板也能支援窄畫面」的性質。因此寫在中繼資料中，而不是用資料夾區分。

顯示方式

面板在 skin.xml、版面在 conf/info.xml 的最上方加入一行。

<?xml version="1.0" encoding="UTF-8"?>
<skin version="0.2">
	<responsive>true</responsive>
	<title xml:lang="ko">내 스킨</title>
	...
</skin>

<?xml version="1.0" encoding="UTF-8"?>
<layout version="0.2">
	<responsive>true</responsive>
	<title xml:lang="ko">내 레이아웃</title>
	...
</layout>

值為 true、y、1 其中之一時視為響應式（不分大小寫）。沒有值或為其他值時，則不是響應式。

預設為「非響應式」

沒有標示的既有面板一律視為非響應式。若面板本來就是以響應式製作，只要加上一行 <responsive>true</responsive> 即可，其他都不必修改。

宣告為 true 的意義

• 以同一套標記・CSS 同時支援寬畫面與窄畫面。窄畫面上不得出現橫向捲軸或元素被截斷。
• 必須以窄畫面可能套用行動版設定值（編輯器・列表數・分頁・頁首/頁尾）為前提來製作。
• 若是版面，在窄畫面上需要調整形態，例如收合選單。

引擎使用此值的地方

• 面板・版面選擇畫面：為響應式的項目加上標章。
• 變更檢視方式：切換為響應式檢視時，若選擇的面板不是響應式，會顯示警告，但不會阻擋。
• 佈景主題套件驗證：宣告為響應式的佈景主題，其組成的面板・版面必須全部為響應式。（請參考製作佈景主題套件）

在程式碼中確認

$skin_info = ModuleModel::loadSkinInfo($module_path, $skin_name);
if ($skin_info->responsive)
{
    // 반응형 스킨
}

相容性

• 既有面板照常運作。沒有值時只是視為 false，不會造成任何損壞。
• 將含有 <responsive> 的面板安裝到 Rhymix 也沒有問題：引擎會忽略不認得的元素。
• 此標示是 Zittme 獨有的，上游 Rhymix 並沒有。