这是我参与11月更文挑战的第17天，活动详情查看：2021最后一次更文挑战
@media
响应式布局中经常用到宽度查询与适配，而@media规则就是用来匹配不同设备的。
.warpper {
width: 44px;
height: 44px;
background-color: red;
}
@media only screen and (max-width: 560px) {
.wrapper{
display:none;
}
}
当设备宽度大于560px的时候，页面会显示侧边栏，但是当设备屏幕的宽度小于560px的时候，页面会隐藏侧边栏的显示，组成规则主要由4部分：媒体查询修饰符用only，媒体类型用screen，媒体条件and，媒体特性用max-width。css中媒体查询由两个修饰符，分别是only和not。
prefers-color-scheme可以用来检测当前网页是否处于深色模式。支持的参数值有3个值，分别是light表示系统倾向于使用浅色模式，dark表示系统倾向于使用深色模式，no-preference表示系统没有告知用户使用的颜色方案。
prefers-reduced-motion用来检测操作系统中是否设置了关闭不必要动画的操作，支持参数值有2个，分别是no-preference表示用户没有通知系统任何首选项，reduced表示用户已通知系统。
any-hover用来测试是否有任意可用的输入装置可以悬停在元素上。支持的参数值有2个，分别为none表示没有输入装置可以实现悬停效果或者没有可以实现指向的输入装置。hover表示一个或多个输入装置可以触发元素的悬停交互效果。
hover主要用来检测输入状态，而any-hover可以检测任意装置。hover支持的参数值有2个，分比为none表示主输入装置根本无法悬停或没有主输入装置的悬停。hover表示主输入装置可以触发元素的悬停交互。
pointer和any-pointer主要用于识别当前环境，判断是否可以方便地进行点击操作。any-pointer支持的有3个属性值，分别为none表示没有可用的点击设置。coarse表示至少有一个设备的点击不是很精确。find表示有点很精准的人设备。pointer支持的也是3个属性值。分别为none表示主输入装置点击不可用。coarse表示主输入装置点击不精确。find表示主输入装置点击很精确。
env()函数可以让网页显示在设备的安全区域范围，也可以用在媒体查询语句中甚至选择器中。env()和var()类似，但是var()只能作为属性值或作为属性值的一部分。可以使用var()函数的地方一定可以使用env()函数。
env(safe-area-inset-top);
var(safe-area-inset-top, 33px);
env(safe-area-inset-bottom);
var(safe-area-inset-bottom, 0.7vh);
