CSS @media 规则

上一页
下一页

CSS @media 规则允许针对特定设备并向其应用 CSS 样式。如果媒体查询与使用内容的设备匹配，则 CSS 代码块将应用于文档。我们可以在 JavaScript 中使用 CSSMediaRule CSS 对象模型接口来访问使用 @media 媒体查询生成的 CSS 规则。

语法

@media [media-type] ([media-feature]) {
   /* CSS Styles */
}

媒体类型

媒体类型用于 CSS 媒体查询，以根据设备应用不同的样式。最常见的媒体类型是 all、print 和 screen。如果您未指定媒体类型，则它将匹配所有设备。但是，如果您使用 not 或 only 逻辑运算符，则必须指定媒体类型。

值 描述
all 默认值。此值适用于所有媒体类型。
print 此值仅在打印文档时有效。
screen 此值仅对屏幕有效，例如计算机、平板电脑和智能手机。

要了解有关媒体类型的更多信息并查看示例，请查看 媒体类型。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

媒体特征

媒体特征根据特定特征、输出设备或环境对网页应用不同的样式。每个媒体特征表达式都需要在其周围加上括号。

要了解有关媒体特征的更多信息并查看示例，请查看 媒体特征。

逻辑运算符

媒体查询可以使用逻辑运算符（如 not、and、only 和 or 以及逗号）组合。下表显示了可在媒体查询中使用的逻辑运算符

逻辑运算符 说明
and 它将多个媒体特征组合到单个媒体查询中，其中每个连接的特征都必须为真，整个查询才能为真。
or 这类似于逗号 , 运算符。这是在媒体查询级别 4 中引入的。
not 它可用于反转条件的逻辑。只有在所有媒体特征都为假时，not 运算符才为真。
only 仅当整个媒体查询匹配时才应用样式。这有助于防止旧版浏览器应用样式。
comma 它将两个或多个媒体查询组合到单个规则中。如果逗号分隔列表中的任何媒体查询为真，则整个媒体语句也将为真。这类似于 or 逻辑运算符。

CSS @media 规则示例

以下示例显示了 @media 规则的使用。

@media 规则与打印和屏幕

以下示例演示了如何使用媒体查询对元素应用不同的样式，当它在屏幕上显示或以打印页面模式显示时。

示例

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      @media print {
         p {
            color: red;
         }
      }
      @media screen {
         p {
            color: blue;
         }
      }
      button {
         background-color: violet;
         padding: 5px;
      }
   </style>
</head>
<body>
   <h2>
      CSS @media Rule 
   </h2>
   <p>
      On the screen, the text will appear in blue.
   </p>
   <p>
      When you open the print preview, 
      the text will be displayed in red.
   </p>
   <p>
      Click on below button to see the 
      effect when you print the page.
   </p>

   <button onclick="printPage()">
      Print Page
   </button>

   <script>
      function printPage() {
         window.print();
      }
   </script>
</body>
</html>

@media 规则与 and 逻辑运算符

以下示例演示了当屏幕宽度在 600px 和 1000px 之间时，段落元素将具有蓝色文本和黄色背景颜色。

示例

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      @media only screen and (min-width: 600px) and (max-width: 1100px)   {
         p {
            color: blue;
            background:  yellow
         }
      }
   </style>
</head>
<body>
   <h2>
      CSS @media Rule 
   </h2>
   <p>
      When you open page on a screen, the paragraph 
      elements will have blue text and a yellow 
      background color.
   </p>
</body>
</html>

@media 规则与逗号逻辑运算符

以下示例演示了 @media screen, print 媒体查询将应用于屏幕和打印媒体类型，元素的文本颜色对于两者都将为红色。

示例

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      @media screen, print {
         p {
            color: red;
         }
      }
      button {
         background-color: violet;
         padding: 5px;
      }
   </style>
</head>
<body>
   <h2>
      CSS @media Rule
   </h2>
   <p>
      When you open a page on a screen or 
      printed page mode, the paragraph element 
      will have red text.
   </p>
   <p>
      Click on below button to see the 
      effect when you print the page.
   </p>

   <button onclick="printedPage()">
      Print Page
   </button>

   <script>
      function printedPage() {
         window.print();
      }
   </script>
</body>
</html>

@media 规则与范围值

以下示例演示了当高度大于 300px 时，文本将为蓝色，背景将为黄色。当宽度在 600px 和 1000px 之间时，文本将为紫色。

示例

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      @media (height < 300px) {
         h4 {
            background-color: yellow;
            color: blue;
         }
      }
      @media (600px <= width <= 1000px) {
         h5 {
            background-color: violet;
         }
      }
   </style>
</head>
</body>
   <h2>
      CSS @media Rule 
   </h2>
   <h3>
      Resize the browser window to see the effect.
   </h3>
   <h4>
      When the height is greater than 300px, 
      the text will be blue and background will 
      be yellow.
   </h4>
   <h5>
      When the width is between 600 and 
      1000px, the text will be violet.
   </h5>
</body>
</html>

@media 规则与响应式导航菜单

以下示例演示了导航栏的布局将水平显示，背景为粉红色。当屏幕尺寸小于 700px 时，导航栏将垂直显示，背景为红色。

示例

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      nav ul {
         list-style: none;
         padding: 0;
         margin: 0;
         background-color: pink;
         padding: 10px;  
      }
      nav li {
         display: inline;
         margin-right: 20px;
         color: blue;
      }
      nav a {
         text-decoration: none;
         text-align: center;
      }
      @media screen and (max-width: 700px) {
         nav ul {
            background-color: red;
         }
         nav li {
            display: block;
            margin: 10px 0;
         }
      }
   </style>
</head>
<body>
   <h2>
      CSS @media Rule 
   </h2>
   <h2>
      Resize the browser window to see the effect.
   </h2>
   <nav>
      <ul>
         <li><a href="#">
            Tutorialspoint
         </a></li>
         <li><a href="#">
            Home
         </a></li>
         <li><a href="#">
            Articles
         </a></li>
         <li><a href="#">
            About us
         </a></li>
      </ul>
   </nav>
</body>
</html>

@media 规则与响应式列布局

以下示例演示了响应式列布局。当屏幕宽度小于 992px 时，列布局将从四列更改为两列，当屏幕宽度小于 500px 时，列布局将更改，它们将彼此堆叠。

示例

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      .column-box {
         float: left;
         width: 25%;
         padding: 3px;
         box-sizing: border-box;
         background-color: pink;
         border: 2px solid blue;
      }
      @media screen and (max-width: 992px) {
         .column-box {
            width: 50%;
         }
      }
      @media screen and (max-width: 500px) {
         .column-box {
            width: 100%;
         }
      }
   </style>
</head>
<body>
   <h2>
      CSS @media Rule 
   </h2>
   <h2>
      Resize the browser window to see the effect.
   </h2>
   <div class="column-box">
      Box 1
   </div>
   <div class="column-box">
      Box 2
   </div>
   <div class="column-box">
      Box 3
   </div>
   <div class="column-box">
      Box 4
   </div>
</body>
</html>

@media 规则与方向

以下示例演示了 orientation: landscape 媒体特征，当视口处于横向方向时，body 元素将具有绿色背景、黄色文本，并且 h3 元素将具有粉红色文本。

示例

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         background-color: violet;
      }
      @media  only screen and (orientation: landscape) {
         body {
            background-color: green;
            color: yellow;
         }
         h3 {
            color: pink;
         }
      }
   </style>
</head>
<body>
   <h2>
      CSS @media Rule 
   </h2>
   <h3>
      Resize the browser window to see the effect.
   </h3>
   <p>
      when the viewport is in landscape orientation, 
      the body element will have a green background, 
      yellow text, and the h3 element will have pink 
      text.
   </p>   
</body>
</html>

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
@media 21 9 3.5 4.0 9
css_properties_reference.htm
打印页面
上一页
下一页
广告