媒体查询

• 媒体查询是做响应式网站的必备
• 媒体查询的格式
  • @media (min-width: 980px){}
  • @media (max-width: 979px) and (min-width: 600px){}
• 注意点:
  • 媒体查询后面有and, 那么and两端必须用空格隔开,否则无效
  • 媒体查询默认设备为all, 具体项可以见 http://www.runoob.com/cssref/css3-pr-mediaquery.html

@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)">