tocas icon indicating copy to clipboard operation
tocas copied to clipboard

響應式問題

Open ChiaYuSu opened this issue 2 years ago • 4 comments

image 寬度剛好落在 768px 的 device (e.g.: iPad mini),會顯示空白

ChiaYuSu avatar Jun 27 '22 09:06 ChiaYuSu

另外想請教 is-minimal-onlyis-standard-only 能否在一個 <div></div> 中疊加使用

ChiaYuSu avatar Jun 27 '22 09:06 ChiaYuSu

第一個問題可以先暫時用下列 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-onlyis-standard-only 的話,你可以使用:is-not-maximal

is-not-maximal 指的是:如果裝置不是 Maximal 就顯示(那他們必定是 Minimal 或 Standard)

YamiOdymel avatar Jun 27 '22 12:06 YamiOdymel

感謝回覆! 目前我加入您提供的 CSS 發現當寬度等於 767px 以及 768px 都會有問題 應該是 breakpoints 設定的問題,期待 Tocas 4.0.5 會修正

ChiaYuSu avatar Jun 27 '22 12:06 ChiaYuSu

笑死,這到底是不是瀏覽器的 Bug 阿 😭👌

YamiOdymel avatar Jun 27 '22 13:06 YamiOdymel

標註一下,Bootstrap 有在斷點特別設計 .98px 可能跟這有關

https://getbootstrap.com/docs/5.3/layout/breakpoints/

image

YamiOdymel avatar Feb 01 '23 22:02 YamiOdymel