CSS @media 规则-之路教程

媒体功能

值	描述
width	视口的宽度。 CSS2
height	观点的高度。
orientation	观点的方向。
scan	扫描视口。
aspect-ratio	“宽度”媒体特征的值与“高度”媒体特征的值的比率。
grid	查询输出设备是否是网格或者位图。
color	输出设备的每个颜色分量的比特数。如果设备不是颜色，则值为0。
color-gamut	用户代理和输出设备支持的近似颜色范围。
color-index	定义输出设备的颜色查找表中的条目数。如果设备不使用颜色查找，则值为0。
inverted-colors	查询浏览器或者底层OS反转颜色是否反转。
hover	查询主输入机制是否允许用户将鼠标悬停在元素上。
any-hover	查询可用的输入机制是否允许用户将鼠标悬停在元素上。
any-pointer	查询可用的输入机制是否是指向设备。
light-level	光线水平的周围环境。
max-aspect-ratio	显示区域的宽度和高度之间的最大比率。
max-color	输出设备的每个颜色组件的最大比特数。
max-color-index	显示的最大颜色数。
max-height	显示区域的最大高度。
max-monochrome	单色器件上每个颜色的最大位数。
max-resolution	设备的最大分辨率。
max-width	显示区域的最大宽度。
min-aspect-ratio	显示区域的宽度和高度之间的最小比率。
min-color	输出设备的每个颜色分量的最小位数。
min-color-index	显示的最小颜色数。
min-height	显示区域的最小高度。
min-monochrome	单色器件上每个颜色的最小位数。
min-resolution	设备的最小分辨率。
min-width	显示区域的最小宽度。
monochrome	在单色帧缓冲器中定义每个像素的比例数。如果设备不是单色一个，则该值为0。
orientation	观点的方向。
overflow-block	查询输出设备如何处理沿块轴溢出视口溢出的内容。
overflow-inline	查询是否可以滚动沿内联轴延迟视口的内容。
pointer	查询主输入机制是否是指向设备。
resolution	描述输出设备的分辨率。
scripting	查询是否可用脚本。
update	查询输出设备如何修改内容外观的快速。

CSS @media 规则

@media at-rule 指定了一组仅应用于特定媒体类型的样式。

媒体查询是一种流行的技术，用于为台式机、笔记本电脑、平板电脑和手机提供响应式网页设计。

除了媒体类型之外，还有一些媒体功能具有名称并接受某些值（如属性）。
但是属性和媒体功能之间存在差异：

没有值就无法显示属性，并且要素不需要值。
与属性不同，功能仅接受单个值。

媒体查询用于检查以下内容：

视口的宽度和高度
设备的宽度和高度
方向
分辨率

在 JavaScript 中，代表单个 @media 规则的 CSSMediaRule 接口可以访问使用 @media 创建的规则。

初始值	all
应用于	某些媒体类型。
继承	无效
可动画的	是的。
版本	媒体查询，CSS2
DOM 语法	object.Style。@ Media =“屏幕和（min-width：500px）”;

语法

@media: media-type (and media-query-feature);

@media 规则示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      body {
        background-color: #1c87c9;
      }
      @media screen and (max-width: 411px) {
        body {
          background-color: #cce5ff;
        }
      }
      @media screen and (min-width: 768px) {
        body {
          background-color: #eee;
        }
      }
      @media screen and (max-width: 962px) and (min-width: 450px),
      (min-width: 1366px) {
        background-color: #333;
      }
    </style>
  </head>
  <body>
    <h2>@media rule example</h2>
    <p>调整浏览器大小以查看效果。</p>
     <p>如果视口宽度为 600 像素或者更宽，媒体查询会将背景颜色设置为浅灰色，如果视口宽度在 200 到 599 像素之间，则将背景颜色设置为绿色。 如果视口小于 200 像素，则背景颜色为蓝色。</p>
  </body>
</html>

在下面的示例中，当浏览器的宽度在 500 到 800 像素之间或者 1000 像素以上时， <div> 的外观会发生变化。

调整浏览器窗口大小以查看效果。

更改了 <div> 外观的 @media 规则示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      body {
        background-color: #1c87c9;
      }
      @media screen and (min-width: 200px) {
        body {
          background-color: #8ebf42;
        }
      }
      @media screen and (min-width: 600px) {
        body {
          background-color: #ccc;
        }
      }
      @media screen and (max-width: 800px) and (min-width: 500px),
      (min-width: 1000px) {
        div.box {
          font-size: 50px;
          padding: 50px;
          border: 8px solid #000;
          background: #eee;
        }
      }
    </style>
  </head>
  <body>
    <h2>@media rule example</h2>
    <p>如果视口宽度为 600 像素或者更宽，Mediaqueries 将背景颜色设置为灰色，如果视口宽度在 200 到 599 像素之间，则设置为绿色。 如果视口小于 200 像素，则背景颜色为蓝色。</p>
     <h3>在不同的屏幕尺寸上改变 DIV 的外观</h3>
    <div class="box">DIV</div>
  </body>
</html>

媒体类型

值	描述
all	此值用于所有设备。这是此属性的默认值。
print	用于打印机。
screen	用于彩色计算机屏幕。
speech	用于发言者。
initial	使属性使用其默认值。
inherit	从父母元素继承属性。

使用媒体在超小型设备上隐藏元素的示例：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <style>
      @media (max-width: 767px) {
        .hide-mobile {
          display: none;
        }
      }
    </style>
  </head>
  <body>
    <h1>Hi</h1>
    <p>There is some text for example.</p>
    <p class="hide-mobile">This text will be hidden on large devices.</p>
    <p>There is some text for example.</p>
  </body>
</html>

使用媒体更改不同设备上的内容背景颜色的示例。

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      @media screen and (max-width: 767px) {
        .content {
          background-color: lightblue;
          padding: 30px;
        }
      }
      @media screen and (min-width: 768px) {
        .content {
          background-color: pink;
          padding: 10px;
        }
      }
      @media screen and (min-width: 800px) {
        .content {
          background-color: lightgreen;
          color: white;
          padding: 50px;
        }
      }
    </style>
  </head>
  <body>
    <div class="content">
      <h2>Resize the browser to see the effect.</h2>
      <p>
        CSS is a rule-based language, which means that you define
        rules specifying groups of styles applying to particular
        elements or groups of elements on the web page.
      </p>
    </div>
  </body>
</html>

日期：2020-06-02 22:14:39 来源：oir作者：oir

←CSS max-width 属性

CSS min-height 属性→