我常用的方法
這作法雖有違背行動優先的概念，但我實務上遇到比較多還是先做電腦版，再依照電腦版樣式改成手機版本，概念歸概念，能能解決問題的就是好方法，提供大家參考
/* 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/
