/* 设备断点 */
@media (max-width: 375px) {
}

@media (max-width: 640px) {
}

/* 移动设备断点 */
@media (max-width: 768px) {
}

/* 桌面电脑断点 */
@media (max-width: 1024px) {
}
@media (min-width: 1024px) {
}

@media (min-width: 1216px) {
}

@media (max-width: 1280px) {
}

@media (max-width: 1408px) {
}

@media (max-width: 1536px) {
}

@media (max-width: 1792px) {
}

@media (max-width: 2048px) {
}

@media (max-width: 2404px) {
}

@supports (display: grid) {
}

@supports not (display: grid) {
}

/*
While scrolling in a page, your finger can accidentally do a half-tap which will trigger the hover state of a specific element.
While the user is scrolling, a hover was triggered. At this point, the user didn't mean to do that at all since there is no hover on mobile.
The solution for this is to use the hover media query. It's possible to detect if the user's current input tool (trackpad vs mouse) can hover over elements.
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover
*/
@media (hover: hover) {
  /* .a:hover {} */
}

@media (orientation: landscape) {
}

@media (min-device-pixel-ratio: 2) {
}
@media (min-resolution: 2dppx) {
}

@media (min-device-pixel-ratio: 3) {
}
@media (min-resolution: 3dppx) {
}

/* 如果用户在系统设置里开启了「减少动态效果 / Reduce Motion」*/
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* 用户没有要求减少动画 */
@media (prefers-reduced-motion: no-preference) {
}