使用window.matchMedia（）匹配多个CSS媒体查询（1）

最新推荐文章于 2025-05-29 11:38:29 发布

cuizhangce7191

最新推荐文章于 2025-05-29 11:38:29 发布

阅读量192

点赞数

文章标签： javascript ViewUI

本文介绍如何利用JavaScript中的window.matchMedia方法响应多个CSS媒体查询，通过示例代码展示了如何针对不同屏幕宽度执行特定操作，适用于前端开发人员学习和实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一个常见的问题是如何使用它 window.matchMedia() 来对多个CSS媒体查询做出反应。在 JavaScript中的CSS媒体查询匹配 教程中，我们快速概述并使用它来响应单个CSS媒体查询更改： window.matchMedia()

 
    
          <font style=  
          "vertical-align: inherit;"  
          ><font style=  
          "vertical-align: inherit;"  
          >  
          function  
          maxwidth800action（mql）{</font></font><font></font><font style=  
          "vertical-align: inherit;"  
          ><font style=  
          "vertical-align: inherit;"  
          >  
        
 
                
          if  
          （mql.matches）{</font></font><font></font><font style=  
          "vertical-align: inherit;"  
          ><font style=  
          "vertical-align: inherit;"  
          >  
        
 
                    
          console.log（“您的窗口是800px或更低”）</font></font><font></font><font style=  
          "vertical-align: inherit;"  
          ><font style=  
          "vertical-align: inherit;"  
          >  
        
 
                
          }</font></font><font></font><font style=  
          "vertical-align: inherit;"  
          ><font style=  
          "vertical-align: inherit;"  
          >  
        
 
                
          其他{</font></font><font></font><font style=  
          "vertical-align: inherit;"  
          ><font style=  
          "vertical-align: inherit;"  
          >  
        
 
                    
          console.log（“你的窗口大于800px”）</font></font><font></font><font style=  
          "vertical-align: inherit;"  
          ><font style=  
          "vertical-align: inherit;"  
          >  
        
 
                
          }</font></font><font></font><font style=  
          "vertical-align: inherit;"  
          ><font style=  
          "vertical-align: inherit;"  
          >  
        
 
          }</font></font><font></font>  
        
 
          <font></font><font style=  
          "vertical-align: inherit;"  
          ><font style=  
          "vertical-align: inherit;"  
          >  
        
 
          var  
          mql = window.matchMedia（“screen and（max-width：800px）”）</font></font><font></font>  
        
 
          <font></font><font style=  
          "vertical-align: inherit;"  
          ><font style=  
          "vertical-align: inherit;"  
          >  
        
 
          maxwidth800action（mql）  
          //在运行时调用maxwidth800action（）</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">  
        
 
          mql.addListener（maxwidth800action）  
          //每当触发媒体查询时调用maxwidth800action（）</font></font>  
        
 
  