分類
WordPress 問與答 網頁設計

Sliders 在手機/行動裝置上顯示的 RWD 概念與作法

Slider 在跨裝置的處理,很早期開始各家較講究的佈景主題開發團隊就常被問了(後來是回到煩,乾脆多弄出欄位任人改算了),且會帶到這概念,我覺得這概念很重要

您好,我想請教一下~ 使用幻燈片秀(Sliders) 如何讓照片在手機裡兩邊不會被切到,在電腦版是全屏幕顯示,但手機就會切到。謝謝~~

是指圖高沒變,圖寬兩邊的內容縮減的狀況?

對,想讓整張圖在手機內都顯示出, 圖高變小寬度可以符合手機寬度

以下不會是「給我我要的」的回答,但會把類似這樣 Sliders On Mobile 的各種可能想要但不一定會比較好的需求、作法包含在內。

Slider 在跨裝置的處理,很早期開始各家較講究的佈景主題開發團隊就常被問了(後來是回到煩,乾脆多弄出欄位任人改算了),且會帶到這概念,我覺得這概念很重要,可參考:http://bridge.qodeinteractive.com/documentation/8-qode-slider/8-7-tips-and-tricks/8-7-1-choosing-appropriate-image-sizes/

Responsive sliders explains via Bridge
Responsive sliders explains – Tablet example via Bridge

一張圖講完這個,比各種必定存在的需求疑問與解法還重要的概念,只差以前看過加劃線、加註圖解更清楚傳達的說明,一時懶得花太多時間翻XD

跨裝置圖示對照(圖見文章裡的 8.6.4.4):http://bridge.qodeinteractive.com/documentation/8-qode-slider/8-6-using-the-slider/8-6-4-width-and-height/

Responsive sliders explains-Cross-devices example 1 via Bridge
Responsive sliders explains-Cross-devices example 2 via Bridge

包含 Slider 元素等各種考量 RWD 的設計,有照正規規劃的設計,都有其綜合考量在,可以趁有需求想改東西時順便了解,有助於做出長期好用又周延的調整決策。

P.S. Bridge 為原文直接取材與範例展示之用,皆非本工作室主要製作工具/資源,相當地不熟,不過背後的原理都是類似的通則,大家也別被自己手邊使用的工具/資源給限制住了。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料