学习 CSS @media 媒体查询

6,332 阅读4分钟

这是我参与更文挑战的第7天,活动详情查看: 更文挑战

属性简介

  1. 基于一个或多个 媒体查询 的结果来应用样式表的一部分。就是可以根据不同的媒体类型定义不同的样式。
  2. 当页面需要响应式布局时,@media 是非常有用的。因为浏览器重置大小时,页面也会根据浏览器的宽度和高度重新渲染页面,使@media重新计算是否加载样式。 样例:
/* screen 当设备是 电脑屏幕,平板电脑,智能手机等。并且 width > 900px 使用 .article 样式块  */
@media screen and (min-width: 900px) {
  .article {
    padding: 1rem 3rem;
  }
}
  1. @media 规则可置于您代码的顶层或位于其它任何@条件规则组内。

媒体类型

  • 描述了设备的类别。媒体类型是可选的,默认是all类型。
  1. all 所有设备上都加载。
  2. print 在打印预览模式下在屏幕上查看的分页材料和文档中加载。
  3. screen 电脑屏幕,平板电脑,智能手机等,中加载。
  4. speech 屏幕阅读器等发声设备中加载。
  • CSS2.1和媒体查询3定义了几种其他媒体类型(tty,tv,projection,handheld,braille,embossed,和aural),现在基本上已经弃用。

逻辑运算符

  • 逻辑运算符 notand以及only可以被用于组成一个复杂的媒体查询。还可以通过用逗号分隔多个媒体查询来将它们合并为一个规则。
  1. not 用于媒体查询取反值,如果媒体查询返回 false,则返回 true。如果出现在以逗号分隔的查询列表中,它只会在当前范围中取反。如果使用not运算符,还必须指定媒体类型。
    /* 在 screen 类型 加载  */
    @media screen {
      .box {
        background-color: red;
      }
    }
    /* 取反 */
    @media not screen {
      .box1 {
        background-color: red;
      }
    }

image.png

  1. and 用于将多个媒体特征组合到一个媒体查询中。它还用于将媒体功能媒体类型连接起来。
    /* 在 screen 类型 大于560px 加载  */
    @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;
      }
    }

1.gif

  1. only 是为了在不支持媒体查询的浏览器中不添加样式。浏览器处理以only开头的关键词时将会忽略only
@media only screen{
    .box {
        background-color: red;
    }
}
// 浏览器中等同于
@media screen{
    .box {
        background-color: red;
    }
}
  1. , (逗号) 逗号用于将多个媒体查询组合成一个规则。逗号分隔列表中的每个查询都与其他查询分开处理。因此,如果列表中的任何查询为真,则整个媒体语句返回真。换句话说,列表的行为就像一个逻辑or运算符。
    /* 在 screen 类型 小于240px 或 大于240px 加载  */
    @media screen and (min-width: 560px), (max-width: 240px) {
      .box {
        background-color: red;
      }
    }
    /* 在 screen 类型 小于 240px 或 大于360px 小于 700px 加载 */
    @media screen and (max-width: 240px), (min-width: 360px) and (max-width: 700px) {
      .box1 {
        background-color: burlywood;
      }
    }

1.gif

媒体功能

  • 根据属性判断当前使用 css 所在的设备,或是浏览环境的具体特征。表达式是可选的,它负责判断这些特性或特征是否存在、值为多少。每条媒体特性表达式都必须用括号括起来。 常用媒体:
  1. height 输出设备中的页面可见区域高度。
  2. width 输出设备中的页面可见区域宽度。
  3. max-aspect-ratio 输出设备的屏幕可见宽度与高度的最大比率。
  4. max-device-aspect-ratio 输出设备的屏幕可见宽度与高度的最大比率。
  5. max-device-height 输出设备的屏幕可见的最大高度。
  6. max-device-width 输出设备的屏幕最大可见宽度。
  7. max-height 输出设备中的页面最大可见区域高度。
  8. max-width 输出设备中的页面最大可见区域宽度。
  9. min-height 输出设备中的页面最小可见区域高度。
  10. min-width 输出设备中的页面最小可见区域宽度。

其他加载方式

style标签上加载

<style media="(min-width: 500px)">
  .box {
    background-color: red;
  }
</style>
<style media="(max-width: 500px">
  .box {
    background-color: burlywood;
  }
</style>
  • 根据media属性定义的媒体查询判断加载那个样式。

@import 使用时加载

@import url(./index.css) (min-width:350px);
@import url(./home.css) (max-width:750px);
  • 在加载最后添加()定义媒体查询判断加载那个样式。

<picture>标签

<picture>
  <source media="(min-width: 650px)" srcset="demo1.jpg">
  <source media="(min-width: 465px)" srcset="demo2.jpg">
  <img src="img_girl.jpg">
</picture>
  • 根据屏幕匹配的不同尺寸显示不同图片,如果没有匹配到或浏览器不支持 picture 属性则使用 img 元素: