[demo]自定义响应式网页(利用css3媒体查询和window.matchMedia实现)

需求：

自定义响应式网页，需要针对不同的屏幕尺寸做不同的处理。

分析：

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