CSS 媒体类型

css有一个重要的特点就是它可以作用于多种媒体,比如页面、屏幕、电子合成器等等。通过相关属性我们可以对不同的设备指定特定的样式从而实现更丰富的界面。下面就让我们一起学习css之媒体(Media)类型。

什么是媒体类型

媒体类型Media Type在CSS2中是一个常见的属性也是一个非常有用的属性可以通过媒体类型对不同的设备指定不同的样式。

简单来说媒体查询可以让我们根据设备显示器的特性如视口宽度、屏幕比例、设备方向横向或纵向为其设定CSS样式。

媒体查询可用于检测的媒体特性比如 width 、 height 和 color 等。使用媒体查询可以在不改变页面内容的情况下为特定的一些输出设备定制显示效果。

常见的媒体类型

在CSS2中常碰到的就是all(全部)、screen(屏幕)、print(页面打印或打印预览模式),也是最常见的三种媒体类型。

逻辑运算符

逻辑运算符 notand以及only可以被用于组成一个复杂的媒体查询。还可以通过用逗号分隔多个媒体查询来将它们合并为一个规则。

not

not 用于媒体查询取反值如果媒体查询返回 false则返回 true。如果出现在以逗号分隔的查询列表中它只会在当前范围中取反。如果使用not运算符还必须指定媒体类型。

 /* 在 screen 类型 加载  */
    @media screen {
      .box {
        background-color: red;
      }
    }
    /* 取反 */
    @media not screen {
      .box1 {
        background-color: red;
      }
    }

and 用于将多个媒体特征组合到一个媒体查询中。它还用于将媒体功能与媒体类型连接起来。

  @media screen and (min-width: 560px) {
      .box {
        background-color: red;
      }
    }
    /* 在 screen 类型 大于560px 小于 700px 加载 */
    @media screen and (min-width: 560px) and (max-width: 700px) {
      .box1 {
        background-color: burlywood;
      }
    }

only 是为了在不支持媒体查询的浏览器中不添加样式。浏览器处理以only开头的关键词时将会忽略only。

@media only screen{
    .box {
        background-color: red;
    }
}
// 浏览器中等同于
@media screen{
    .box {
        background-color: red;
    }
}