自适应

当页面显示于移动端的时候，为了匹配不同的设备，通常会用到 :

@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;}