JavaScript---媒体查询(响应式)

媒体查询

• 媒体查询是做响应式网站的必备
• 媒体查询的格式
  • @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文件时候的媒体查询

• 媒体查询采用内联