CSS RWD 響應式斷點 @media 及常用尺寸速查

我常用的方法

這作法雖有違背行動優先的概念,但我實務上遇到比較多還是先做電腦版,再依照電腦版樣式改成手機版本,概念歸概念,能能解決問題的就是好方法,提供大家參考

/* Extra large devices */
@media (min-width: 1200px) { ... }

/* desktops */
@media (max-width: 992px) { ... }

/* tablets */
@media (max-width: 768px) { ... }

/* phones */
@media (max-width: 576px) { ... }

行動優先-響應式斷點

介紹完我常用的斷點,也介紹一下比較正規的做法,下列這就是行動優先下的響應式斷點,先決定手機版樣式,再針對平板或電腦的樣式進行調整

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { ... }
 
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }
 
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }
 
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

https://getbootstrap.com/docs/4.3/layout/overview/#responsive-breakpoints

Bootstrap 4 – RWD Layout

這是Bootstrap定義的斷點

/* xs - Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) { ... }

/* sm - Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) { ... }

/* md - Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) { ... }

/* lg - Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

/* xl - Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

https://getbootstrap.com/docs/4.3/layout/overview/#responsive-breakpoints

WordPress Elementor CSS breakpoint

/*
WordPress Elementor CSS breakpoint 
*/
body[data-elementor-device-mode="desktop"]{
    /* something */
/**
 * 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 */
}

Refrence: https://v123.tw/wordpress-elementor-css-breakpoint/

如果文章對您很有幫助
請我喝杯咖啡吧

Bitcoin 比特幣錢包:

38ieWXhURt27br9XrDoCeo4eruzKyi8QKs



ann71727

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。

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