CSS 媒体查询是一种非常实用的技术,它允许我们根据不同的设备或屏幕尺寸来应用不同的样式。下面,我们将详细介绍 CSS 媒体查询的使用方法。
媒体查询语法
媒体查询的基本语法如下:
@media media-type and (expression) {
CSS样式;
}
其中,media-type
表示媒体类型,如 screen
、print
等;expression
表示媒体查询的条件,如 min-width: 600px
。
常用媒体查询
以下是一些常用的媒体查询:
- 屏幕宽度:
min-width
和max-width
- 设备方向:
orientation
- 分辨率:
resolution
屏幕宽度
@media screen and (min-width: 600px) {
/* 当屏幕宽度大于或等于 600px 时应用的样式 */
}
设备方向
@media screen and (orientation: landscape) {
/* 当设备方向为横屏时应用的样式 */
}
分辨率
@media screen and (min-resolution: 192dpi) {
/* 当分辨率大于或等于 192dpi 时应用的样式 */
}
实例
以下是一个简单的例子,展示如何使用媒体查询来改变按钮的样式:
button {
background-color: blue;
color: white;
}
@media screen and (min-width: 768px) {
button {
background-color: green;
color: black;
}
}
在这个例子中,当屏幕宽度大于或等于 768px 时,按钮的背景颜色会变为绿色,文字颜色变为黑色。
扩展阅读
想了解更多关于 CSS 媒体查询的知识?请阅读我们的CSS 媒体查询高级教程。
CSS 媒体查询示例