1. 媒体查询响应式布局

1. 常用媒体设备类型

• screen 屏幕显示设备
• print 打印机设备

<style media="screen, print"></style>

2. 使用link标签设置媒体类型

<link rel="stylesheet" href="css/screen.css" media="screen">

3. 使用@import简化引入多文件

<link rel="stylesheet" href="css/common.css" >

• css/common.css

@import url(screen.css) screen;
@import url(print.css) print;

4. 样式表中使用@media

• screen.less 使用less文件编写，可安装Easy LESS插件，@import引入时还是screen.css

@media screen and (max-width: 768){
  .item {
      display: none;
  }
}

5. and 逻辑与

• 屏幕设备 在最小宽度768px和最大宽度1000px之间，闭区间

<style media="screen and (min-width: 768px) and (max-width: 1000px)"></style>

6. , 逻辑或

• 小于768px 或者 大于1000px

<style media="screen and (max-width: 768px), screen and (min-width: 1000px)"></style>

7. not 逻辑非

• 不在768px到1000px之间

  <style>
    @media not screen and (min-width: 768px) and (max-width: 1000px) {
      h1 {
        color: red;
      }
    }
  </style>

8. only

• 使用only排除低端浏览器，支持媒体查询才显示该样式，使用的很少

  <style>
    @media only screen and (min-width: 768px) and (max-width: 1000px) {
      h1 {
        color: red;
      }
    }
  </style>