@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);
rem和vw
rem相对于html元素，rem中的r指的就是根元素。
html {
font-size: 22px;
}
所以上述代码中1rem就是22px; 0.5rem就是11px；如果font-size为10px，则1rem就是10px；rem渲染尺寸并不总是整数，1.25rem在375px宽度屏幕下的计算值是20px；但是在414px宽度屏幕下的计算值为22.5px；非整数尺寸偶尔会带来一些渲染的问题。
视区相对单位指的是相对于浏览区视区尺寸的单位。有4个单位，vw指的是视区宽度百分比。vh视区高度百分比。vmin指的是vw或vh，取小的那个值。vmax指的是vw或vh，取大的那个值。常用的是vw单位，100vw表示一个视区宽度，在手机浏览器中，视区宽度就等于手机的像素宽度。
touch-action属性是移动端转给你与手势触摸密切相关的css属性，接收值有2个，分别是manipulation取消300ms的点击延迟。表示浏览器只允许进行滚动和持续缩放操作，类似双击缩放这种非标准操作就不被允许。当我们设置touch-action: manipulation时，取消了双击行为，300ms延时也不存在了。none解决threated as passive错误，表示不进行任何手势相关的行为。
html {
touch-action: manipulation
}
除以上两种常用的属性值外，还有其他属性值。auto默认值，用来表示手势操作完全由浏览器决定。pan-x用来表示支持手指头水平移来移去的操作。pan-y用来表示支持手指头垂直移来移去的操作。pan-left用来表示支持开始后往右可以恢复的操作。pan-right用来表示支持手指头往右移动，移动开始后往左可以恢复的操作。pan-up用来表示手指头往上移动，移动开始后往下可以恢复的操作。pan-down用来表示支持手指头往下移动，移动开始后往上可以恢复的操作。pinch-zoom用来表示手指头缩放页面的操作。pan-x、pan-left、pan-right可以为一组使用，pan-y、pan-up和pan-down可以为一组，pan-zoom可以单独为一组。
image-set()函数可以根据不同设备的屏幕密度或者分辨率来显示不同的背景图或者遮罩图片。用到的情况有不同屏幕密度下显示的是完全不同的图以及用户体验和流量收益足够明显的场景。
