當(dāng)頁面顯示于移動(dòng)端的時(shí)候，為了匹配不同的設(shè)備，通常會(huì)用到 :
@media screen and(max-width:320px){
//視窗寬度<=320px時(shí)生效
}
@media screen and(min-width:769px){
//視窗寬度>=769px時(shí)生效
}
@media screen and(max-width:1000px)and(min-width:769px){
//769px<=視窗寬度<=1000px時(shí)生效
}
案例：高清屏的背景圖片適配
當(dāng)我們把一個(gè)圖標(biāo)做成CSS中的背景圖，在視網(wǎng)膜屏上預(yù)覽時(shí)會(huì)發(fā)現(xiàn)圖標(biāo)是模糊的，所以我們會(huì)同時(shí)準(zhǔn)備一個(gè)2倍大小的圖標(biāo)給高清屏，那么問題來了，怎么實(shí)現(xiàn)在普通屏下是普通背景圖，而在高清屏下是用的高清圖呢？
.pic {
background: url(pic1.jpg);
}
//高清圖
@media screen and(-webkit-min-device-pixel-ratio:1.5){
.pic {
background: url(pic2.jpg);
}
}
后續(xù)。
移動(dòng)端點(diǎn)擊a標(biāo)簽和img標(biāo)簽時(shí)閃屏的解決方式。
因?yàn)榘聪氯サ臅r(shí)候 等于是在選擇元素，所以會(huì)有閃屏的錯(cuò)覺，直接把IOS的特性去了就行。
代碼如下。
html{ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);};
html{-webkit-tap-highlight-color:none}
或者
html{-webkit-tap-highlight-color:transparent;}
