tocas
tocas copied to clipboard
響應式問題
寬度剛好落在 768px 的 device (e.g.: iPad mini),會顯示空白
另外想請教 is-minimal-only
跟 is-standard-only
能否在一個 <div></div>
中疊加使用
第一個問題可以先暫時用下列 CSS 覆寫修正,但這樣 Minimal 會變成 ≤ 766px
而 Standard 會是 ≥ 767px
,
斷點遇到 768px
的時候沒有正常運作,不知道是什麼奇怪的問題,我會看一下。
※ 網格系統看起來有正常判斷把 768px
納入 standard
裡 🤔
@media screen and (max-width: 767px) {
.is-standard-only,
.is-maximal-only {
display: none !important;
}
}
@media screen and (min-width: 767px) {
.is-minimal-only {
display: none !important;
}
}
@media screen and (max-width: 767px) {
.is-not-minimal {
display: none !important;
}
}
@media screen and (min-width: 767px) and (max-width: 993px) {
.is-not-standard {
display: none !important;
}
}
另一個問題如果要疊加 is-minimal-only
跟 is-standard-only
的話,你可以使用:is-not-maximal
。
is-not-maximal
指的是:如果裝置不是 Maximal 就顯示(那他們必定是 Minimal 或 Standard)
感謝回覆!
目前我加入您提供的 CSS
發現當寬度等於 767px
以及 768px
都會有問題
應該是 breakpoints 設定的問題,期待 Tocas 4.0.5 會修正
笑死,這到底是不是瀏覽器的 Bug 阿 😭👌
標註一下,Bootstrap 有在斷點特別設計 .98px
可能跟這有關
https://getbootstrap.com/docs/5.3/layout/breakpoints/