媒体查询
可以根据屏幕尺寸大小的变化，动态调整元素样式。适合制作移动端页面和响应式页面。
媒体查询使用的注意事项：
1.查询条件如果使用的是max-width，尺寸值按照由大到小的顺序书写
如果使用的是min-width，尺寸值由小到大的顺序书写。
2.初始样式设置在@media 的上方。
@media 表示媒体查询
screen 表示媒体类型(包括电脑屏幕，手机，平板电脑)
and关键字，表示且
max-width/min-width:表示设备可视区域最大宽度/最小宽度
rem和em
rem:相对单位，始终以html根标签的font-size为参照，计算标签尺寸大小
比如:html{font-size:100px} div{width:1rem},最终计算出来div的宽度为:100px；
em:相对单位，以父元素的font-size为参照，计算标签尺寸大小。类似于百分比单位.
vw和vh
vw 和 vh 该单位始终是以浏览器可视区域为参照。它是将浏览器的可视区域的宽度视为100vw, 可
视区域的高度视为100vh。
事件穿透现象
pc端点击事件有300毫秒的延迟
移动端的手势ontouchstart事件,没有延迟
setTimeout(function(){
mask.style.display = 'none'
},300)
问题：事件穿透问题(在pc端不存在该现象)
原因：因为手势事件 ontouchstart/on('tap')是没有延迟
而pc端事件click,onmousedown都有300ms的延迟，当上层元素快速隐藏之后
下方的输入框延迟300ms之后，又触发了点击事件
解决方式：
1.统一使用pc端的click事件
2.给ontouchstart/on('tap')添加延迟
3.使用插件FastClick 解决300ms延迟的问题
