CSS3 @media的基本用法总结
CSS3 @media是一种CSS3的新特性，它可以根据不同的设备或屏幕尺寸应用不同的CSS样式。本攻略将详细讲解CSS3 @media的基本用法，包括语法、常用媒体查询和示例说明。
1. 语法
CSS3 @media的语法如下：
@media mediatype and|not|only (media feature) {
/* CSS rules */
}
其中，mediatype表示媒体类型，可以是all、print、screen等；and、not、only是逻辑运算符，用于组合多个媒体查询；media feature表示媒体特性，例如width、height、orientation等。
2. 常用媒体查询
CSS3 @media支持多种媒体查询，常用的媒体查询包括：
- width：屏幕宽度。
- height：屏幕高度。
- orientation：屏幕方向，可以是portrait（纵向）或landscape（横向）。
- aspect-ratio：屏幕宽高比。
- device-width：设备宽度。
- device-height：设备高度。
- device-aspect-ratio：设备宽高比。
- color：颜色位数。
- resolution：屏幕分辨率。
3. 示例说明
3.1 示例一
下面是一个示例，演示了如何使用CSS3 @media根据屏幕宽度应用不同的CSS样式。
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style>
/* 默认样式 */
body {
background-color: white;
color: black;
}
/* 在屏幕宽度小于600px时应用的样式 */
@media (max-width: 600px) {
body {
background-color: black;
color: white;
}
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
上述代码中，设置了默认样式和在屏幕宽度小于600px时应用的样式。当屏幕宽度小于600px时，可以看到背景色变为黑色，文字颜色变为白色。
3.2 示例二
下面是另一个示例，演示了如何使用CSS3 @media根据屏幕方向应用不同的CSS样式。
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style>
/* 默认样式 */
body {
background-color: white;
color: black;
}
/* 在屏幕方向为横向时应用的样式 */
@media (orientation: landscape) {
body {
background-color: black;
color: white;
}
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
上述代码中，设置了默认样式和在屏幕方向为横向时应用的样式。当屏幕方向为横向时，可以看到背景色变为黑色，文字颜色变为白色。
总结
CSS3 @media是一种CSS3的新特性，它可以根据不同的设备或屏幕尺寸应用不同的CSS样式。在使用CSS3 @media时，需要了解其语法和常用媒体查询，并根据实际需求设置不同的CSS样式。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS3 @media的基本用法总结 - Python技术站
微信扫一扫 
支付宝扫一扫 