WordPress Elementor RWD CSS breakpoint

WordPress Elementor 提供3種裝置分別是電腦、平板、手機,雖然可以用 CSS @media 比較標準的方式來判斷,但在 Elementor 中斷點的尺寸是一個參數,可以自訂義數值,此狀況若透過客製 CSS,以 @media 這種方式給予響應式的樣式,因為斷點可能會跟Elementor 編輯器產生的內容樣式有差異,除非每改一次斷點寬度,都需要再調整過所有的 CSS @media 斷點數值,或禁止主題去調整斷點寬度數值,但這主題將對 Elementor 不友善,與主題開發以最大化的開發原則背道而馳

Elementor 可以透果 body 上的 data-elementor-device-mode 屬性來判斷裝置,這是筆者認為最佳的做法,Elementor 會隨裝置更改這個屬性值,分別是desktop、tablet、mobile,下段提供簡易的 CSS Demo,如此,不管電腦、平板、手機的斷點寬度定義為何,或開發中更改,都不會影響,這種做法彈性最大

/**
 * WordPress Elementor CSS breakpoint
 * @author Ann <ann@vector.com>
 * @link https://v123.tw/wordpress-elementor-css-breakpoint/
 */
body[data-elementor-device-mode="desktop"]{
    /* something */
}
body[data-elementor-device-mode="tablet"]{
    /* something */
}
body[data-elementor-device-mode="mobile"]{
    /* something */
}

發佈留言

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

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