需求：

自定義響應式網頁，需要針對不同的螢幕尺寸做不同的處理。

分析：

1，樣式處理，必須是css3媒體查詢，簡單有效；

2，行為和結構的處理，我們選用window.matchMedia函式處理；

驗證(vue框架中做的驗證，程式碼如下)：

1，新建matchMedia資料夾，裡面新建index.vue檔案，寫好如下程式碼，建立一個自定義響應式網頁元件：

<template>
  <div class='media' @click="getTips">
  window.matchMedia查詢結果提示
  </div>
</template>

<script>
  export default{
    methods:{
      //點選時驗證js提示色是否和如下css設定的一致
      getTips(){
        if(window.matchMedia('screen and (min-width:992px)').matches){
          alert("大屏 紅色")
        }else if(window.matchMedia('screen and (min-width:768px) and (
        max-width: 992px)').matches){
          alert("中屏 綠色")
        }else if(window.matchMedia('screen and (max-width: 768px)').matches){
          alert("小屏 藍色")
        }
      },
    },
  }
</script>

<style lang="less" scoped>
  @media  screen and (min-width:992px){
    .media{
      color:red;  
    }
  }
  @media  screen and (min-width:768px) and (max-width: 992px){
    .media{
      color:green;  
    }
  }
  @media  screen and (max-width: 768px){
    .media{
      color:blue;  
    }
  }    
</style>
 

2，在router資料夾的index.js檔案內引入上一步建立的vue檔案，併為其設定訪問路徑

//引入定義好的響應式元件
import matchMedia from '@/page/matchMedia/index'

    {
      //為響應式元件設定訪問路徑
      path: '/matchMedia',
      name: 'matchMedia',
      component: matchMedia
    }  

3，npm run dev專案跑起來，在位址列增加字尾/matchMedia訪問該元件，切換瀏覽器尺寸，並在不同尺寸下點選驗證。

備註：

博文通覽提示：

Tom哥的部落格博文分類和索引頁面地址：https://blog.csdn.net/tom_wong666/article/details/84137820