Grid 與 subgrid subgrid 是一種很奇妙的跨維度設定，在 w3c 當中有詳細解釋。我這邊稍微提一下他到底是什麼樣的概念。 遵從父層格線系統，跳出現有維度形成單一欄（或行）的區塊。 子格線系統跟父層格線系統共享格線設定。 子格線系統格線總量與他所跨維度的父層格線軌跡相同。 若子網格系統跨維度軌跡固定，則取父層格線軌跡的跨度起始值。 若子網格系統跨維度不固定，則取父層格線軌跡跨度起算為 1。 子網格系統起算的 <數字> - <位置> 是獨立在自己的網格系統內。 子網格若是被填充在父層格線系統之前，那麼子網格軌跡會使用父層格線系統的格線命名，但這些名稱必須要是子網格系統以外的名字。 子網格系統的命名若跟父層格線系統重疊，
InAppBrowser 說在最前面的，以目前的 iOS / Android 生態來看，所謂的 InAppBrowser 大部分的支援程度都還算可以。最主要的差異在於使用了 JavaScript 的差異，跟真正的 瀏覽器 會有點落差。但是，對於樣式表來說，支援度基本上都還會有七八分像，至於不像的部分，那就是看 iOS / Android 給各種 App 的 WebView 是不是有什麼限制。 通常，對於一般用戶來說，在 App 裡面打開網頁這件事情很常見， 你的網站我打不開很爛耶！
Grid 還是 Flex 我們回歸到行動裝置本身，究竟我們在前端設計的時候，要採用 Grid 還是 Flex 來製作所謂的手機版？ 我認真說，如果你是 AWD 的話，用 Flex 就綽綽有餘。 如果你是採用 RWD 的話，用 Grid 或許比較方便。 當然，這些事情沒有一定的準則，不然你看看大家 Bootstrap 還不是用得很快樂，有人在意他到底是 Grid 還是 Flex 嗎？
從手機版到桌機版 講完一些基礎的 Media Query 之後，我們來看看全部都放在一起的一些情況。單就我們 前幾天 提到的狀況，在那個 .sidebar 屬於手機版或桌機版，所呈現的欄位問題來看。 .gird { grid-template-columns: repeat(auto-fit, [body] minmax(36rem, 1fr) [end]); } 一般來說從這裡開始沒有什麼太大的問題，唯一的狀況就在於，當你的 .sidebar 因為 @media 的設定而變成 columns 排列時，你的 .context-wrapper
尺寸規則 基本常見的尺寸設定會以這些前輟字 max-* 或 min-* 開頭，這個之前就提到過了， min-* 屬性值大於等於。 max-* 屬性值小於等於。 可以使用這些前輟字的有， width 寬度。 height 高度。 aspect-ratio 寬度與高度比，輸入方式是 4/3。 resolution 解析度。 當然，以上也可以不使用前輟字，他就會變成是絕對相符的設定，相對比較少人會這樣使用，舉例來說， @media (width: 360px) { /* 寬度一定要 360px
尺寸 對於 RWD 的設計來說，通常最大的問題點在於，你到底要相容多少尺寸，抑或，到底你的業主的窗口的主管的老婆的手機型號到底要不要考慮進去？ 通常是不會。 我們在設計所謂的「手機版」跟「桌機版」的情況下，基本上會留下一些能夠相容的尺寸，例如說，從最小的 320px 一直到 414px 會是一種版本，然後到了 600px 直到 768px 會是一種版本，再往上 1024px 到 1200px 會是一種，接著 1200px