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

原创声明

本文系作者辛苦码字所得，欢迎分享和转载，但请在明显位置注明作者的如下信息：
笔名：来碗鸡蛋面
简书主页：https://www.jianshu.com/u/4876275b5a73
邮箱：job_tom@foxmail.com
CSDN ID：tom_wong666

需求：

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

分析：

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访问该组件，切换浏览器尺寸，并在不同尺寸下点击验证。

备注：

此设置已验证OK，需要看源码的同学，可以克隆如下项目查看：
demo的github地址：https://github.com/tom-wong666/xiaoa.git