媒体查询

可以根据屏幕尺寸大小的变化，动态调整元素样式。适合制作移动端页面和响应式页面。

媒体查询使用的注意事项：

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延迟的问题