CSS中适配与响应(二)(css响应式布局 菜鸟教程)
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()函数可以根据不同设备的屏幕密度或者分辨率来显示不同的背景图或者遮罩图片。用到的情况有不同屏幕密度下显示的是完全不同的图以及用户体验和流量收益足够明显的场景。
作者：周帅帅
链接：https://juejin.cn/post/7031698767149531173