SAP UI5 sap.ui.Device.media.RANGESETS如何使用

這篇文章主要介紹“SAP UI5 sap.ui.Device.media.RANGESETS如何使用”，在日常操作中，相信很多人在SAP UI5 sap.ui.Device.media.RANGESETS如何使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”SAP UI5 sap.ui.Device.media.RANGESETS如何使用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

這是一個 namespace，來自 sap.ui.core：包含預定義屏幕寬度媒體查詢范圍集(media query range sets)的名稱和設置的枚舉。

在 Chrome 開發者工具 Console 面板里能夠查看到所有可能的值：

sap.ui.Device.media.RANGESETS.SAP_3STEPS

一個 3 步范圍集 (S-L)。

這組的范圍是：

• S：適用于小于 520 像素的屏幕。

• M：適用于大于或等于 520 像素且小于 960 像素的屏幕。

• L：適用于大于或等于 960 像素的屏幕。

要使用此范圍集，必須顯式初始化它 (sap.ui.Device.media.initRangeSet)。

如果此范圍集已初始化，則會將 CSS 類添加到頁面根（html 標記），指示當前屏幕寬度范圍：sapUiMedia-3Step-NAME_OF_THE_INTERVAL.

sap.ui.Device.media.RANGESETS.SAP_4STEP

4 步范圍設置 (S-XL)。

這組的范圍是：

• S：適用于小于 520 像素的屏幕。

• M：適用于大于或等于 520 像素且小于 760 像素的屏幕。

• L：適用于大于或等于 760 像素且小于 960 像素的屏幕。

• XL：適用于大于或等于 960 像素的屏幕。

要使用此范圍集，您必須顯式初始化它 (sap.ui.Device.media.initRangeSet)。

如果此范圍集已初始化，則會將 CSS 類添加到頁面根（html 標記），指示當前屏幕寬度范圍：sapUiMedia-4Step-NAME_OF_THE_INTERVAL。

sap.ui.Device.media.RANGESETS.SAP_STANDARD

一個 3 步范圍集（Phone, Tablet, Desktop）。

這組的范圍是：

• phone：適用于小于 600 像素的屏幕。

• Tablet: 適用于大于或等于 600 像素且小于 1024 像素的屏幕。

• Desktop: 適用于大于或等于 1024 像素的屏幕。

默認情況下自動初始化此范圍集。不需要通過 sap.ui.Device.media.initRangeSet 進行初始化。

將一個 CSS 類添加到頁面根（html 標記），指示當前屏幕寬度范圍：sapUiMedia-Std-NAME_OF_THE_INTERVAL。此外，還有 5 個額外的 CSS 類可以根據屏幕寬度隱藏元素：

• sapUiHideOnPhone：如果屏幕有 600px 或更少，將被隱藏

• sapUiHideOnTablet：如果屏幕大于 600px 小于 1023px 將被隱藏

• sapUiHideOnDesktop：如果屏幕大于 1024px 將被隱藏

• sapUiVisibleOnlyOnPhone：僅當屏幕小于 600px 時才可見

• sapUiVisibleOnlyOnTablet：僅當屏幕有 600px 或更大但小于 1024px 時才可見

• sapUiVisibleOnlyOnDesktop：僅當屏幕有 1024px 或更大時才可見

到此，關于“SAP UI5 sap.ui.Device.media.RANGESETS如何使用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！