跳到主要内容

媒体查询的交互特征

orientation 如何匹配？​

  • 机制: 根据屏幕方向决定是否命中;
@media (orientation: portrait) {
  body {
    color: rebeccapurple;
  }
}
  • 取值:
    • portrait: 纵向屏幕;
    • landscape: 横向屏幕;

hover 如何匹配？​

  • 机制: 根据设备指针能否悬停决定是否命中;
  • 能悬停: 鼠标、触控板、部分触控笔;
  • 不能悬停: 纯触摸屏;
@media (hover: hover) {
  body {
    color: rebeccapurple;
  }
}

pointer 如何匹配？​

  • 机制: 根据主指针设备类型决定是否命中;
@media (pointer: fine) {
  body {
    color: rebeccapurple;
  }
}
  • 取值:
    • fine: 鼠标或触控板;
    • coarse: 触摸屏;
    • none: 其余设备;