自訂迴轉檢視器

迴轉檢視器的所有視覺化自訂和大部分行為自訂都是透過建立自訂CSS來完成。

建議的工作流程是取得適當檢視器的預設CSS檔案、將其複製到其他位置、自訂該檔案，並在style=命令中指定自訂檔案的位置。

可以在以下位置找到預設的CSS檔案：

<s7_viewers_root>/html5/SpinViewer_light.css

檢視器隨附現成可用的CSS檔案，適用於「淺色」和「深色」色彩配置。 預設會使用「淺色」版本，但您可以使用以下標準CSS切換至「深色」版本：

<s7_viewers_root>/html5/SpinViewer_dark.css

自訂CSS檔案必須包含與預設檔案相同的類別宣告。 如果省略類別宣告，則檢視器無法正常運作，因為它沒有為使用者介面元素提供內建的預設樣式。

提供自訂CSS規則的替代方式是直接在網頁上或其中一個連結的外部CSS規則中使用內嵌樣式。

建立自訂CSS時，請記得檢視器會將.s7spinviewer類別指派給其容器DOM元素。 如果您使用透過style=命令傳遞的外部CSS檔案，請在CSS規則的子系選取器中使用.s7spinviewer類別作為父類別。 如果您在網頁上執行內嵌樣式，請一併以容器DOM元素的ID限定此選取器，如下所示：

#<containerId>.s7spinviewer

建立回應式設計的CSS

您可以在CSS中鎖定不同的裝置和內嵌大小，讓內容顯示方式因使用者裝置或特定網頁版面配置而異。 此功能包括但不限於，不同的網頁版面配置、使用者介面元素大小和圖稿解析度。

檢視器支援兩種建立回應式設計CSS的方法： CSS標籤和標準CSS媒體查詢。 您可以單獨或搭配使用這些方法。

CSS標籤

為協助您建立回應式設計CSS，檢視器支援CSS標籤，這些特殊CSS類別會動態指派給頂層檢視器容器元素。 這些類別是以執行階段檢視器大小和目前裝置上使用的輸入型別為基礎。

第一組CSS標籤包括.s7size_large、.s7size_medium和.s7size_small類別。 它們會根據檢視器容器的執行階段區域套用。 也就是說，如果檢視器區域等於或大於使用普通桌上型熒幕.s7size_large的大小；如果區域的大小接近指定給普通平板電腦裝置.s7size_medium。 對於類似行動電話熒幕的區域，已設定.s7size_small。 這些CSS標籤的主要用途是為不同的熒幕和檢視器大小建立不同的使用者介面配置。

第二組CSS標籤包含.s7mouseinput和.s7touchinput。 如果目前裝置具有觸控輸入功能，則會設定標籤.s7touchinput；否則會使用.s7mouseinput。 這些標籤旨在為不同的輸入型別建立具有不同熒幕大小的使用者介面輸入元素，因為一般而言，觸控輸入需要更大的元素。 如果裝置同時具有滑鼠輸入和觸控功能，則設定.s7touchinput，且檢視器呈現觸控式使用者介面。

下列範例CSS在含有滑鼠輸入的系統上將放大按鈕大小設定為28 x 28畫素，在觸控裝置上將設定為56 x 56畫素。 此外，如果檢視器大小變小，則會完全隱藏按鈕：

若要鎖定具有不同畫素密度的裝置，請使用CSS媒體查詢。 下列媒體查詢區塊將包含高密度熒幕專屬的CSS：

使用CSS標籤是建置回應式設計CSS的最靈活方式。 原因是因為它可讓您不僅鎖定裝置熒幕大小，還鎖定檢視器實際大小，這對於回應式設計頁面配置可能很有用。

使用預設檢視器CSS檔案作為CSS標籤方法範例。

CSS媒體查詢

裝置感應也可以使用純CSS媒體查詢來完成。 指定媒體查詢區塊中所包含的所有內容，只有在對應裝置上執行時才會套用。

套用至行動檢視器時，請使用四個CSS媒體查詢，這些查詢會依照下列順序定義於CSS中：

使用媒體查詢方法，您應該使用裝置感應來整理CSS，如下所示：

不需要在每個媒體查詢中複製整個檢視器CSS。 只有指定裝置的特定屬性才會重新定義在媒體查詢中。