当页面显示于移动端的时候，为了匹配不同的设备，通常会用到 :
@media screen and(max-width:320px){
//视窗宽度<=320px时生效
}
@media screen and(min-width:769px){
//视窗宽度>=769px时生效
}
@media screen and(max-width:1000px)and(min-width:769px){
//769px<=视窗宽度<=1000px时生效
}
案例：高清屏的背景图片适配
当我们把一个图标做成CSS中的背景图，在视网膜屏上预览时会发现图标是模糊的，所以我们会同时准备一个2倍大小的图标给高清屏，那么问题来了，怎么实现在普通屏下是普通背景图，而在高清屏下是用的高清图呢？
.pic {
background: url(pic1.jpg);
}
//高清图
@media screen and(-webkit-min-device-pixel-ratio:1.5){
.pic {
background: url(pic2.jpg);
}
}
后续。
移动端点击a标签和img标签时闪屏的解决方式。
因为按下去的时候 等于是在选择元素，所以会有闪屏的错觉，直接把IOS的特性去了就行。
代码如下。
html{ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);};
html{-webkit-tap-highlight-color:none}
或者
html{-webkit-tap-highlight-color:transparent;}
