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

原创声明

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

需求：

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

分析：

1，样式处理，必须是css3媒体查询，简单有效；

2，行为和结构的处理，我们选用window.matchMedia函数处理；

验证(vue框架中做的验证，代码如下)：

1，新建matchMedia文件夹，里面新建index.vue文件，写好如下代码，建立一个自定义响应式网页组件：

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