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

版权声明：本文作者“Tom哥”，版权归作者所有，欢迎转载，但请务必在明显位置注明作者和原文链接，否则保留追究法律责任的权利。 https://blog.csdn.net/tom_wong666/article/details/84143978

需求：

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

分析：

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

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

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

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

[code]<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文件，并为其设置访问路径

[code]//引入定义好的响应式组件
import matchMedia from '@/page/matchMedia/index'

[code]    {
//为响应式组件设置访问路径
path: '/matchMedia',
name: 'matchMedia',
component: matchMedia
}

3，npm run dev项目跑起来，在地址栏增加后缀/matchMedia访问该组件，切换浏览器尺寸，并在不同尺寸下点击验证。

备注：

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

博文通览提示：

点击此超链接跳转到Tom哥的博文分类和索引页面 

Tom哥的博客博文分类和索引页面地址：https://www.geek-share.com/detail/2753347056.html

阅读更多