好用的媒体查询

媒体查询

媒体查询时，你可以设置一系列的条件来应用特定的样式。以下是一些常用的 CSS 媒体查询详细用法：

根据屏幕宽度设置样式：

/* 最大宽度为600px */
@media (max-width: 600px) {
  /* CSS样式 */
}

/* 最小宽度为601px */
@media (min-width: 601px) {
  /* CSS样式 */
}

/* 在600px和1000px之间 */
@media (min-width: 600px) and (max-width: 1000px) {
  /* CSS样式 */
}

根据设备方向设置样式：

/* 横屏 */
@media (orientation: landscape) {
  /* CSS样式 */
}

/* 竖屏 */
@media (orientation: portrait) {
  /* CSS样式 */
}

根据设备类型设置样式：

/* 打印设备 */
@media print {
  /* CSS样式 */
}

/* 屏幕设备 */
@media screen {
  /* CSS样式 */
}
根据分辨率设置样式：
/* 最小分辨率为300dpi */
@media (min-resolution: 300dpi) {
  /* CSS样式 */
}

/* 最大分辨率为600dpi */
@media (max-resolution: 600dpi) {
  /* CSS样式 */
}

除了以上示例，你还可以根据其他设备特性来设置样式，如触摸屏、设备宽高比等。CSS媒体查询提供了非常灵活强大的方式来实现响应式布局和样式适配。

希望这些详细的用法对你有所帮助！如果你还有其他问题，请随时提问。