请给出常用的CSS媒体查询
时间: 2024-10-12 08:09:20 浏览: 5
常用的CSS媒体查询包括但不限于以下几个方面:
1. **屏幕尺寸**:
- `@media all and (min-width: value)` 或 `@media only screen and (min-width: value)`:检查视口宽度是否大于某个值。
- `@media all and (max-width: value)` 或 `@media only screen and (max-width: value)`:检测宽度是否小于等于某个值。
- `@media handheld` 或 `@media only screen and (max-device-width: value)`:针对移动设备。
2. **设备方向**:
- `@media screen and (orientation: portrait)`:垂直方向显示(手机横屏)。
- `@media screen and (orientation: landscape)`:水平方向显示(手机竖屏)。
3. **视口比例**:
- `@media screen and (aspect-ratio: value / value)`:用于匹配设备纵横比。
4. **颜色模式**:
- `@media color`:仅适用于彩色显示器。
- `@media no-color`:适用于黑白或只有点阵显示的设备。
5. **打印媒体**:
- `@media print`:应用于打印预览或实际打印的样式。
常见的组合形式有检查屏幕宽度和方向,如:
```css
@media screen and (min-width: 768px) and (orientation: portrait) {
/* 移动设备的窄屏纵向样式 */
}
@media print {
/* 打印专用样式 */
}
```