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 − 此值仅对屏幕有效，例如计算机、平板电脑和智能手机。
要了解有关媒体类型的更多信息并查看示例，请查看媒体类型。

媒体特写

媒体功能根据特定特性、输出设备或环境对网页应用不同的样式。每个媒体功能表达式都需要用括号括起来。

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

逻辑运算符

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

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

CSS @media - 打印和屏幕

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


<html>
<head>
<style>
	 	@media print {
	 	 	 p {
	 	 	 	 	color: red;
	 	 	 }
	 	}
	 	@media screen {
	 	 	 p {
	 	 	 	 	color: blue;
	 	 	 }
	 	}
	 	button {
	 	 	 background-color: violet;
	 	 	 padding: 5px;
	 	}
</style>
</head>
<body>
	 	<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>

CSS @media带有和逻辑运算符的

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


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

CSS @media 带有逗号（，）逻辑运算符的

以下示例演示@media屏幕，打印媒体查询将同时应用于屏幕和打印媒体类型，元素的文本颜色对于两者都将是红色的 -


<html>
<head>
<style>
	 	@media screen, print {
	 	 	 p {
	 	 	 	 	color: red;
	 	 	 }
	 	}
	 	button {
	 	 	 background-color: violet;
	 	 	 padding: 5px;
	 	}
</style>
</head>
<body>
	 	<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>

具有范围值的 CSS @media

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


<html>
<head>
<style>
	 	@media (height < 300px) {
	 	 	 h4 {
	 	 	 	 	background-color: yellow;
	 	 	 	 	color: blue;
	 	 	 }
	 	}
	 	@media (600px <= width <= 1000px) {
	 	 	 h5 {
	 	 	 	 	background-color: violet;
	 	 	 }
	 	}
</style>
</head>
	 	<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>

CSS @media 响应式导航菜单

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


<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>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>

CSS @media响应式列布局

以下示例演示了响应式列布局的启动。当屏幕宽度小于 992px 时，列布局从四列变为两列，并且屏幕宽度小于 500px，列布局会发生变化，它们彼此叠加的位置会发生变化 -


<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>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>

CSS @media 响应式专栏网站

以下示例演示了响应式列布局的启动。当屏幕宽度大于 450px 时，列布局会发生变化，它们彼此重叠的位置会发生变化 -


<html>
<head>
<style>
	 	.header {
	 	 	 padding: 200px;
	 	 	 text-align: center;
	 	 	 background: #e72626;
	 	 	 color: white;
	 	}
	 	.navbar {
	 	 	 display: flex;
	 	 	 background-color: #1abc9c;
	 	}
	 	.navbar a {
	 	 	 color: white;
	 	 	 padding: 14px 20px;
	 	 	 text-decoration: none;
	 	 	 text-align: center;
	 	}
	 	.navbar a:hover {
	 	 	 background-color: #ddd;
	 	 	 color: black;
	 	}
	 	.row {
	 	 	 display: flex;
	 	 	 flex-wrap: wrap;
	 	}
	 	.flexbox {
	 	 	 flex: 70%;
	 	 	 display: flex;
	 	 	 background-color: #f1f1f1;
	 	 	 padding: 20px;
	 	}
	 	.flexbox flexbox1,
	 	flexbox2 {
	 	 	 flex: 35%;
	 	}
	 	.right_side {
	 	 	 flex: 30%;
	 	 	 background-color: white;
	 	 	 padding: 20px;
	 	}
	 	.images {
	 	 	 background-color: #f5ff34;
	 	 	 width: 100%;
	 	 	 padding: 20px;
	 	}
	 	.my-button {
	 	 	 padding: 10px 20px;
	 	 	 font-size: 16px;
	 	 	 background-color: #4CAF50;
	 	 	 color: white;
	 	 	 border: none;
	 	 	 border-radius: 5px;
	 	 	 cursor: pointer;
	 	}
	 	.my-footer {
	 	 	 padding: 20px;
	 	 	 text-align: center;
	 	 	 background: #ddd;
	 	}
	 	@media screen and (max-width: 450px) {
	 	 	 .row,
	 	 	 .flexbox,
	 	 	 .navbar {
	 	 	 	 	flex-direction: column;
	 	 	 }
	 	}
</style>
</head>
<body>
	 	<h4 style="text-align:center">Resize the browser window to see the effect.</h4>
	 	<div class="navbar">
	 	 	 <a href="#">Home</a>
	 	 	 <a href="#">Courses</a>
	 	 	 <a href="#">Articles</a>
	 	 	 <a href="#">Setting</a>
	 	 	 <a href="#">About us</a>
	 	</div>

	 	<div class="header">
	 	 	 <h1>Tutorialspoint</h1>
	 	 	 <h4>Simple Easy Learning</h4>
	 	</div>

	 	<div class="row">
	 	 	 <div class="flexbox">
	 	 	 	 	<div class="flexbox1">
	 	 	 	 	 	 <h2>HTML</h2>
	 	 	 	 	 	 <h5>Jan 17, 2003</h5>
	 	 	 	 	 	 <img src="html.png" style="height:300px; width:95%">
	 	 	 	 	 	 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
	 	 	 	 	 	 	 	the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
	 	 	 	 	 	 	 	type and scrambled it to make a type specimen book.</p>
	 	 	 	 	 	 <button class="my-button">More info</button>
	 	 	 	 	</div>
	 	 	 	 	<br>
	 	 	 	 	<div class="flexbox2">
	 	 	 	 	 	 <h2>CSS</h2>
	 	 	 	 	 	 <h5>Sep 22, 1995</h5>
	 	 	 	 	 	 <img src="css.png" style="height:300px; width:95%">
	 	 	 	 	 	 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
	 	 	 	 	 	 	 	the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
	 	 	 	 	 	 	 	type and scrambled it to make a type specimen book.</p>
	 	 	 	 	 	 <button class="my-button">More info</button>
	 	 	 	 	</div>
	 	 	 	 	<div class="flexbox2">
	 	 	 	 	 <h2>Bootstrap</h2>
	 	 	 	 	 <h5>5 Dec 22, 2011</h5>
	 	 	 	 	 <img src="boot.png" style="height:300px; width:95%">
	 	 	 	 	 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
	 	 	 	 	 	 	the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
	 	 	 	 	 	 	type and scrambled it to make a type specimen book.</p>
	 	 	 	 	 <button class="my-button">More info</button>
	 	 	 	</div>
	 	 	 </div>
	 	 	 <div class="right_side">
	 	 	 	 	<h3>Articles</h3>
	 	 	 	 	<div class="images" style="height:100px;">
	 	 	 	 	 	 <h3>HTML</h3>
	 	 	 	 	 	 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
	 	 	 	 	 	 	 	the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
	 	 	 	 	 	 	 	type and scrambled it to make a type specimen book.</p>
	 	 	 	 	</div><br>
	 	 	 	 	<div class="images" style="height:100px;">
	 	 	 	 	 	 <h3>CSS</h3>
	 	 	 	 	 	 <p>Lorem Ipsum is simply dummy text of the printing and
	 	 	 	 	 	 	 	typesetting industry. Lorem Ipsum has been
	 	 	 	 	 	 	 	the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
	 	 	 	 	 	 	 	type and scrambled it to make a type specimen book.</p>
	 	 	 	 	</div><br>
	 	 	 	 	<div class="images" style="height:100px;">
	 	 	 	 	 	 <h3>Bootstrap</h3>
	 	 	 	 	 	 <p>Lorem Ipsum is simply dummy text of the printing and
	 	 	 	 	 	 	 	typesetting industry. Lorem Ipsum has been
	 	 	 	 	 	 	 	the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
	 	 	 	 	 	 	 	type and scrambled it to make a type specimen book.</p>
	 	 	 	 	</div><br>
	 	 	 	 	<div class="images" style="height:100px;">
	 	 	 	 	 	 <h3>Javascript</h3>
	 	 	 	 	 	 <p>Lorem Ipsum is simply dummy text of the printing and
	 	 	 	 	 	 	 	typesetting industry. Lorem Ipsum has been
	 	 	 	 	 	 	 	the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
	 	 	 	 	 	 	 	type and scrambled it to make a type specimen book.</p>
	 	 	 	 	</div>
	 	 	 	 	<h2>About Me</h2>
	 	 	 	 	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
	 	 	 	 	 	 industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
	 	 	 	 	 	 and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
	 	 	 	 	 	 leap into electronic typesetting, remaining essentially unchanged.Lorem Ipsum is simply dummy text of
	 	 	 	 	 	 the printing and typesetting industry. Lorem Ipsum has been the
	 	 	 	 	 	 industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
	 	 	 	 	 	 and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
	 	 	 	 	 	 leap into electronic typesetting, remaining essentially unchanged.Lorem Ipsum is simply dummy text of
	 	 	 	 	 	 the printing and typesetting industry.</p>
	 	 	 </div>
	 	</div>
	 	<div class="my-footer">
	 	 	 <h2>© 2023 Tutorialspoint</h2>
	 	</div>
</body>
</html>

CSS @media - 方向

以下示例演示了 orientation： landscape media 功能，当视口处于横向时，body 元素将具有绿色背景、黄色文本，而 h3 元素将具有粉红色文本 −

 


<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>
	 	<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>
打印本页
上一页
下一页