如何在iPad和移动端断点下禁用指定的CSS样式代码？

数据老陈

2026-9-28

实现方法

你可以通过CSS媒体查询限定原有样式仅在桌面端生效，iPad、移动设备会自动忽略对应规则，有两种常用适配方案：

方案1：按宽度断点适配（兼容所有旧版浏览器）

常规iPad横竖屏最大宽度为1024px，手机宽度普遍小于等于915px，你可以将原有代码包裹在桌面端专属的媒体查询中：

@media (min-width: 1025px) {
    .sub-menu > li > a {
        color: #242424 !important;
        background: #ffffff !important;
        border: #333333 !important;
    }
    .sub-menu > li:hover > a {
        color: #ffffff !important;
        font-weight: bold !important;
        background: #004f94 !important;
        border: #004f94 !important;
    }
}

如果你的站点有自定义的响应式断点，直接把`1025px`替换为你的项目中桌面端对应的最小宽度即可。

方案2：按设备能力适配（更精准，兼容现代浏览器）

如果要避免部分超大屏触摸设备误触发样式，可以基于设备输入能力做判断，仅对支持鼠标hover、使用精细指针的桌面设备生效：

@media (hover: hover) and (pointer: fine) {
    .sub-menu > li > a {
        color: #242424 !important;
        background: #ffffff !important;
        border: #333333 !important;
    }
    .sub-menu > li:hover > a {
        color: #ffffff !important;
        font-weight: bold !important;
        background: #004f94 !important;
        border: #004f94 !important;
    }
}