Sass breakpoint 共用變數 about mirror-media-nuxt HOT 5 CLOSED

覺得 2 還滿好的，語意上較容易理解。

我也是擔心例外狀況的問題，但我想，當碰到例外狀況，是不是就不會用共用變數去解決了？這樣似乎採用那一種，例外狀況的處理都一樣？

如果擔心例外狀況的問題，似乎也可以兩者都採用，而我們在使用的時候，就盡可能都先採用第 2 種，第 2 種解決不了的，再用第 1 種？

from mirror-media-nuxt.

如果擔心例外狀況的問題，似乎也可以兩者都採用，而我們在使用的時候，就盡可能都先採用第 2 種，第 2 種解決不了的，再用第 1 種？

我覺得可以考慮這樣，例外狀況的機會應該很低

from mirror-media-nuxt.

我建議先以 Bootstrap 訂的數值為標準，以不提供 992px(lg) 的方式而非直接將 1200px(xl) 改成 lg。
我認為這樣有兩個好處：

• 在程式碼的閱讀上可以暗示我們目前沒有考慮 md 到 lg 這個級距，而是直接到 xl。
• 往後若有加回 lg 的需要只需要單純加回來即可，因其他 breakpoints 並無做更名（譬如說 1200px 被我們修改成 lg 了，但還要改回成 xl）。

from mirror-media-nuxt.

根據 https://github.com/mirror-media/mirror-media-nuxt/wiki/Guidelines-&-Workflows#media-queries ，我們目前有五種 breakpoints：

• >= 576px
• <= 767.98px
• >= 768px
• <= 1199.98px
• >= 1200px

據 @yeefun 提供的 Bootstrap 文件的命名方式，「暫時」做以下命名：

• Small(sm)
  • > 576px
• Medium(md)
  • <= 767.98px (md-down)
  • >= 768px (md)
• Extra large(xl)
  • <= 1199.98px (xl-down)
  • >= 1200px (xl)

我們會比較希望用以下哪兩種方式？

1. 提供變數的方式來管理 breakpoints

/* css properties of mobile */

/* NOT A DEFAULT QUERY, add when we want to handle landscapes */
@media (min-width: $breakpoint-sm) and (max-width: $breakpoint-md-down) {
  /* css properties of landscapes */
}

@media (min-width: $breakpoint-md) {
  /* css properties of tablets */
}

/* NOT A DEFAULT QUERY, add when we want to handle bigger tablets */
@media (min-width: $breakpoint-md) and (max-width: $breakpoint-xl-down) {
  /* css properties of bigger tablets */
}

@media (min-width: $breakpoint-xl) {
  /* css properties of desktops */
}

2. 提供 SASS mixin 來管理 breakpoints

/* css properties of mobile */

/* NOT A DEFAULT QUERY, add when we want to handle landscapes */
@include media-breakpoint-only(sm) {
  /* css properties of landscapes */
}

@include media-breakpoint-up(md) {
  /* css properties of tablets */
}

/* NOT A DEFAULT QUERY, add when we want to handle bigger tablets */
/* Bootstrap 中找不到這個 mixin，我純粹根據語意 lg-only 取名 */
@include media-breakpoint-only(lg) {
  /* css properties of bigger tablets */
}

@include media-breakpoint-up(xl) {
  /* css properties of desktops */
}

我認為 2. 在閱讀上較容易理解，但 1. 比較有彈性，因 2. 算是將目前的 breakpoints 系統化了，若遇到例外情況會需要花比 1. 多一點的成本來處理。
我目前偏好先用 1.（但我們還需要就 breakpoints 的取名做討論），待我們開發一段時間後 breakpoints 能夠做出大致的歸類並大致確認沒有太多例外情況後再做 2. 的系統化。

from mirror-media-nuxt.

忘了提，Extra large(xl) 換成 large(lg) 似乎比較好？
直接跳過一個尺寸標準感覺怪怪的。

from mirror-media-nuxt.