媒體查詢
- 媒體查詢是做響應(yīng)式網(wǎng)站的必備
- 媒體查詢的格式
- @media (min-width: 980px){}
- @media (max-width: 979px) and (min-width: 600px){}
- 注意點(diǎn):
@media (min-width: 980px){} //當(dāng)網(wǎng)頁(yè)寬度大小大于980px執(zhí)行
@media (max-width: 979px) and (min-width: 600px){} //當(dāng)網(wǎng)頁(yè)寬度大小大于600px并且小于等于979的時(shí)候執(zhí)行
外界引入less文件時(shí)候的媒體查詢
<!--1.引入PC端的CSS文件-->
<link rel="stylesheet" href="css/pc.css" media="screen and (min-width: 980px)">
<!--2.引入平板端的CSS文件-->
<link rel="stylesheet" href="css/pad.css" media="screen and (max-width: 980px) and (min-width: 600px)">
<!--3.引入手機(jī)端的CSS文件-->
<link rel="stylesheet" href="css/phone.css" media="screen and (max-width: 600px)">