快速入门和使用CSS媒体查询

媒体查询

媒体查询可以根据用户设备的尺寸不同而调用不同的样式。它是一种向不同设备提供不同内容的简单而有效的方式，最常用的查询是处理视口高度和宽度的查询。

首先了解一下行内设置

在我们style标签中的media可以设置两个属性，一个是screen[屏幕]、另一个是print[打印机]，通过这样的设置针对不同的东西完成对应的css样式设置。

 <style media="screen">
        h1 {
            color: green;
        }
    </style>
    <style media="print">
        h1 {
            color: yellow;
        }
        
        h2 {
            display: none;
        }
    </style>
 <h1>aaa</h1>
 <h2>bbb</h2>

页面中的显示: screen

打印机的显示：print

通过外部的css引入

在一个公共类的css中通过@important设置引入screen.css和print.css两个文件，在index.html中使用link标签来引入conmon文件： link rel=“stylesheet” href="./css/conmon.css"

• conmon.css

@import url(screen.css) screen;
@import url(print.css) print;

• screen.css

h1 {
    color: red;
}

• print.css

h1 {
    color: yellowgreen;
}

在style里面设置@media媒体查询

先看@media的简单使用：

<style media="screen">
        /* 导航条 */
        
        .navbar {
            height: 60px;
            width: 900px;
            display: flex;
            align-items: center;
            background-color: #ccc;
            margin: 0 auto;
        }
        
        .navbar ul {
            list-style: none;
            display: flex;
        }
        
        /* 如果宽度小于600px的时候就执行里面的操作 */
        @media screen and (max-width:600px) {
            .navbar ul {
                display: none;
            }
        }
    </style>

大于600px的时候：保持原来的状态

小于600px的时候：隐藏

关于层级问题

在我们学习媒体查询的时候常常会出现这样的一个问题：最大宽度和最小宽度设置的值相同，那麽这1px是属于谁呢？在这个css里面中，谁在最后，这1px就属于谁。看下面的案例就一幕了然了。

 <style media="screen and (min-width:768px)">
        h1 {
            color: red;
        }
    </style>
    <style media="screen and (max-width:768px)">
        h1 {
            color: blue;
        }
    </style>

最终的颜色是属于后者的，显示蓝色。

媒体查询的区间值 and判定

在我们使用媒体查询设置一些样式的时候，在一个范围内不执行该媒体查询，我们在后面可以增加一个and来确定他的区间。比如下面这个案例：

<style media="screen and (min-width:768px) and (max-width:1000px)">
        h1 {
            color: red;
        }
    </style>
    <style media="screen and (max-width:768px)">
        h1 {
            color: blue;
        }
    </style>

在pc端的时候，不执行上面任何一个查询，字体颜色显示黑色

not 关键字的使用

这个not就是我们所谓的不的，也就是程序中的非，非这个条件不用：我们可以这样理解，非薯条不吃，不是薯条我出吃。我们看案例就可以一目了然了。注意这个not 需要放在这个条件前面

<style>
        @media not screen and (min-width:500px) and (max-width:768px) {
            h1 {
                color: red;
            }
        }
    </style>

使用only 关键字排除低端浏览器

使用方式和上述的not一样，我们，就只是把not 换成 only；代码 略~~~