CSS3媒体查询总结

媒体查询能在不同条件下使用不同的样式，使页面在不同终端设备下达到不同的渲染效果。从而实现响应式布局的效果。
除了可以使用自适应viewport（ viewport概念）的方式实现一定的响应式布局的效果，也可以通过对不同媒体设备更改样式的方式实现一定的响应式布局的效果。

媒体类型	说明
all	所有媒体类型（默认）
screen	用于电脑屏幕、平板电脑、智能手机等
print	打印设备
speech	应用于屏幕阅读器等发声设备

注：tty tv projection handheld braille embossed aural 设备类型已经被废弃

1. 使用媒体设备

• 使用style标签定义媒体查询

  // 屏幕设备适用
  <style media="screen">
  
      div {
          width: 200px;
          height: 200px;
          background-color: #788787;
      }
  </style>
  
  // 打印设备适用
  <style media="print">
      div {
          width: 100px;
          height: 100px;
          color: #e67e22;
      }
  </style>
  <div>Cheng</div>
  

  在Chrome如何调出打印设备呢？

  • 快捷键方式

    Ctrl + P

  • 手动打开

    打开网页-> 点击右上角三个小点 -> 打击打印

可以看到不同设备适用不同的样式

• 使用link标签

  <link rel="stylesheet" href="/css/1.css" media="screen">
  <link rel="stylesheet" href="/css/2.css" media="print">
  
  <div>
      2
  </div>
  

• CSS规则@import

  在css文件中或者在style标签开头写

  • style标签中

    <style>
        @import "/css/1.css" screen;
    </style>
    

  • CSS文件中

    // 1.css文件中
    @import "/css/practice_01.css" print,speech;
    

  采用此方式避免在HTML页面中写很多link标签

• @media

  之前的方式都是整个CSS样式应用某些媒体，但是也可以使用@media在样式表中为某些媒体定义相应的样式

  <style>
          @media screen {
              div {
                  width: 200px;
                  height: 200px;
                  background-color: #e74c3c;
              }
          }
  
          @media print {
              div {
                  width: 100px;
                  height: 100px;
                  background-color: #3498db;
              }
          }
  </style>
  

2. 设备方向

使用 orientation 属性可以定义设备的方向

属性值	说明
portrait	竖屏设备即高度大于宽度
landscape	横屏设备即宽度大于高度

使用：

@media screen and (orientation: landscape){
    div {
        width: 200px;
        height: 200px;
        background-color: #e74c3c;
    }
}

3. 常用特性

特性	说明
orientation: landscape | portrait	landscape横屏，portrait竖屏
width	设备宽度
height	设备高度
min-width	最小宽度
max-width	最大宽度
min-height	最小高度
max-height	最大高度

4. 查询条件

可以使用不同条件显示当前设备使用的样式，条件表达式放在括号内

1. 逻辑与

   使用and连接多个条件

   @media screen and (min-width: 400px){
       div {
           width: 200px;
           height: 200px;
           background-color: #e74c3c;
       }
   }
   

   表示：只有当viewport大于400px时，才可以使用此样式

2. 逻辑或

   使用or 当两个条件中一个满足即可

3. 不使用

   使用not表示不使用指定样式，放在条件之前，表示当条件满足时不使用该样式，类似于取反操作

4. 排除不支持查询的浏览器

   使用only用于排除不支持查询的浏览器

   • 对支持媒体查询的设备，正常调用样式，此时就当only不存在
   • 对不支持媒体查询的设备不使用样式
   • only 和 not 一样只能出现在媒体查询的开始