原创声明
本文系作者辛苦码字所得，欢迎分享和转载，但请在明显位置注明作者的如下信息：
笔名：来碗鸡蛋面
简书主页：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
