如何通过条件媒体查询(media query)为指定分辨率应用CSS样式？

你可以直接用逗号分隔两个「或」逻辑的媒体查询条件，把目标样式包裹进去即可。如果是WordPress站点，把代码贴到后台「外观」-「自定义」-「额外CSS」面板里就能直接生效。

完整的实现代码如下：

/* 匹配宽度<576px 以及 750px≤宽度≤900px的场景 */
@media (max-width: 575.98px), (min-width: 750px) and (max-width: 900px) {
  /* 把下面的.cta-button替换成你页面CTA按钮实际的选择器即可 */
  .cta-button {
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 1.1rem;
  }
}

补充说明：

• 这里用max-width: 575.98px而非576px是为了避免和其他等于576px边界的媒体查询出现样式冲突，你也可以根据需求直接改成max-width: 576px
• 如果不知道按钮的选择器，可以打开浏览器F12调试工具，选中对应按钮就能在元素面板看到它的类名/ID
• 媒体查询里的逗号代表「满足任意一个条件就生效」的或逻辑，刚好匹配你需要的两个触发区间

内容的提问来源于stack exchange，提问作者CodeForGood