Breakpoint（斷點） - daniel-qa/Vue GitHub Wiki

Breakpoint（斷點）

這些斷點全部都是指「Viewport 的寬度（width）」，也就是瀏覽器可視區域的水平寬度。

簡單說就是「畫面寬度的分界線」

  • 1680 以上(含)，span = 8， 1680 以下，span =10
條件	套用版型
< 1680px	緊湊版（給一般筆電 13~15"）
≥ 1680px	寬螢幕版（給 24" / 27" 螢幕）
  • 監聽銀幕解度，來調整 colSpan 的大小
<template>
  <div style="padding: 20px;">
    <Row>
      <Col :span="colSpan">
        <div class="demo-box left-box"></div>
      </Col>
      <Col :span="colSpan">
        <div class="demo-box right-box"></div>
      </Col>
    </Row>
  </div>
</template>

<script>
export default {
  name: 'TestComponent',

  data() {
    return {
      windowWidth: window.innerWidth
    }
  },

  computed: {
    // <1680 → 24（直排）
    // ≥1680 → 12（雙欄）
    colSpan() {
      return this.windowWidth >= 1680 ? 12 : 24
    }
  },

  mounted() {
    window.addEventListener('resize', this.handleResize)
  },

  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  },

  methods: {
    handleResize() {
      this.windowWidth = window.innerWidth
    }
  }
}
</script>

<style scoped>
.demo-box {
  min-height: 200px;
  border-radius: 4px;
}

.left-box {
  background: #667eea;
}

.right-box {
  background: #f5576c;
}
</style>

當視窗寬度跨過這條線時，版面就切換成不同的排版。

  • Col 響應式規則

查找順序：從大到小，找到有設定的就用，都沒有則用 span

xl → lg → md → sm → xs → span (fallback)
尺寸代號 視窗寬度條件 說明
xs < 576px 超小裝置（手機直向）
sm ≥ 576px 小型裝置（手機橫向）
md ≥ 768px 平板
lg ≥ 992px 桌面螢幕
xl ≥ 1200px 大型桌面螢幕

1920x1200 這種寫法是 寬 x 高。

寬度（width）：1920（水平）

高度（height）：1200（垂直）

span 是預設值，沒有符合的 breakpoint 時就套用它。

1680px 會落在 xl（≥1200px）區間，所以調整 xl 的值即可。

只有在 1200px 以上時才會切換成 xl

<!-- 左側 -->
<Col :span="16" :xl="12">

<!-- 右側 -->
<Col :span="8" :xl="12">```

視窗寬度 < 576px   → xs 的設定生效
視窗寬度 ≥ 576px   → sm 的設定生效
視窗寬度 ≥ 768px   → md 的設定生效  ← 你問的這個
視窗寬度 ≥ 992px   → lg 的設定生效
視窗寬度 ≥ 1200px  → xl 的設定生效

<Col :xs="24" :sm="24" :md="16" :lg="16">

生活化比喻 就像褲子的尺寸：

< S 號  → 穿小版型
S ~ M   → 穿中版型  
M ~ L   → 穿大版型
> L     → 穿加大版型

Breakpoint 就是那個尺寸分界的數字。

⚠️ **GitHub.com Fallback** ⚠️