媒体查询


<!--    方法三-->
    <link rel="stylesheet" media="(max-width:800px)" href="css/bgc.css">
    <style>
    /*方法一 媒体查询导入*/
    @import url("./css/bgc.css") (max-width: 800px);

    /*方法二*/
    @media(max-width: 800px){
      body {
        background-color: red;
      }
    }
    </style>

在JS中使用Window.matchMedia()和MediaQueryList.addListener()方法来测试和监控媒体状态

逻辑操作符

and：用于将多个媒体查询规则组合成单条媒体查询

not：用于否定媒体查询，如果不满足这个条件则返回true，否则返回false

only：仅在整个查询匹配时才用于应用样式

,（逗号）：逗号用于将多个媒体查询合并为一个规则