/* 设备断点 */
@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) {
}