媒体查询
- 媒体查询是做响应式网站的必备
- 媒体查询的格式
- @media (min-width: 980px){}
- @media (max-width: 979px) and (min-width: 600px){}
- 注意点:
@media (min-width: 980px){} //当网页宽度大小大于980px执行
@media (max-width: 979px) and (min-width: 600px){} //当网页宽度大小大于600px并且小于等于979的时候执行
外界引入less文件时候的媒体查询
<!--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.引入手机端的CSS文件-->
<link rel="stylesheet" href="css/phone.css" media="screen and (max-width: 600px)">
