CSS的媒体查询语法
CSS的媒体查询语法
- 常见的媒体类型
- 常见的特性
- 示例
CSS的媒体查询语法可以根据不同的设备特性（如屏幕尺寸、分辨率等）应用不同的样式。基本语法如下：
@media 媒体类型 and (特性: 值) {
/* 样式规则 */
}
常见的媒体类型
screen：用于显示在屏幕上的设备print：用于打印机或预览页面all：适用于所有设备
常见的特性
width：视口的宽度height：视口的高度min-width：最小宽度max-width：最大宽度min-height：最小高度max-height：最大高度resolution：设备的分辨率orientation：设备的方向（landscape为横屏，portrait为竖屏）
示例
- 针对不同屏幕宽度设置样式
/* 屏幕宽度大于等于768px时应用 */
@media (min-width: 768px) {
body {
background-color: lightblue;
}
}
/* 屏幕宽度小于768px时应用 */
@media (max-width: 767px) {
body {
background-color: lightcoral;
}
}
- 针对横屏和竖屏方向设置样式
/* 竖屏模式 */
@media (orientation: portrait) {
body {
background-color: lightgreen;
}
}
/* 横屏模式 */
@media (orientation: landscape) {
body {
background-color: lightyellow;
}
}
- 结合多个条件使用
/* 屏幕宽度大于等于768px并且设备分辨率为高 */
@media (min-width: 768px) and (min-resolution: 192dpi) {
body {
background-color: lightpink;
}
}
通过媒体查询，你可以为不同设备定制不同的样式，优化响应式设计。