https://codepen.io/hereiscasio/pen/GRRKdxb

我們可能都遇過有些特殊的響應式設計情境或細節，需透過 JS 處理會更好，而 Vueitfy 就有提供相關 API，讓你直接能在 JS 中調用，但這是雙面刃，建議讀者只在真正需要時，才透過這種方式處理。濫用帶來的負面影響真的蠻大的，最明顯的特徵就是會搞到很難維護，所以今天目標是仿製簡單的範例 Google YoutubeMusic，示範使用 JS 處理 RWD 的反模式（ Anti Pattern ）

在連續調整本日 Codepen 網頁寬度時，你可以發現一個明顯的 "響應式延遲現象"（ 或是 Lag ），原因很簡單，因本日範例大多數是藉由 JS 製作響應式設計，遠不及透過原生的 CSS 處理(當然，對多數專案來說，這可能不重要)，除此之外你可發現只是開發這麼簡單的版面，標籤碼已經非常亂，而這個雜亂的現象也無法透過使用 Vue SFC 解決（ 當然你真要做一定做得到，只是會把問題搞得很複雜 ）

我們稍微瀏覽一下，Vuetify 提供哪些 API 幫助我們處理響應式設計。首先是 CSS 端，它提供了一堆 class，例如 flex-sm-column（ 所以你可猜到，sm 這個字串是可以改變的，例如改成 md, lg ... ），它的意思是當網頁寬度在 sm 這個尺寸（ Vuetify 預設是 600 < w < 960，見此 ）時，把 flexbox 的排列方向改成縱向

很多 styling 的屬性都可透過結合諸如 Vuetify 預設的斷點作使用（ e.g. pa-md-3, d-lg-block... ）具體可至 Styles & animations 的章節中查閱，規則相當簡單。至於在 JS 端的相關 API 可在 Customization > Breakpoints 中找到，如 smAndUp 代表 sm 以上含 sm

new Vuetify({
    breakpoint: {
        thresholds: {
            xs: 514,   // < 514
            sm: 768    // 514 < w < 768
        }
    }
})

注意，若你想客製化斷點的預設值，目前 JS 和 CSS 端要分開改，也就是說你透過上面的 JS 做更改後，並不會影響 CSS 端的 API，以上述 flex-sm-column 為例，這時 sm 還是預設值！但其實不管要更改那部分的預設值，官方文件都有寫，見 Customization > Breakpoints

<template>
<v-dialog :fullscreen="$vuetify.breakpoint.xsOnly">
    ...
</v-dialog>
</template>