媒体查询实现PC、移动端样式

发表于 阅读次数：
通过 CSS 媒体查询实现PC端、移动端样式差异化

开发过程中遇到一个小需求：鼠标移动到封面图上的时候，封面图抬起。

但是在移动端访问时，点击封面图时，也会让封面图抬起，第二次点击才会让封面图复原。请教了 ChatGPT 老师后，给出了下边的方案：

1
2
3
4
5
6
7
8
9
10
11
12
13
/* PC 端的 hover 效果 */
@media (hover: hover) and (pointer: fine) {
  .cover:hover {
    transform: translateY(-6px);
  }
}

/* 移动端禁用 hover 效果 */
@media (hover: none) and (pointer: coarse) {
  .cover:hover {
      transform: none;
  }
}
  • PC 端的 hover 效果：使用 @media (hover: hover) and (pointer: fine) 查询，这个查询针对具有悬停能力和精细指针的设备，如鼠标设备。在这些设备上启用 hover 效果。
  • 移动端禁用 hover 效果：使用 @media (hover: none) and (pointer: coarse) 查询，这个查询针对没有悬停能力且指针粗略的设备，如触摸屏设备。在此部分禁用或调整样式。

参考：
@media/pointer
@media/hover