如何基于条件媒体查询应用 CSS？答案

【问题标题】：How to apply CSS based on conditional media query?如何基于条件媒体查询应用 CSS？
【发布时间】：2021-12-25 08:21:45
【问题描述】：

我有一个 WordPress 页面，上面有三个 CTA 按钮，当分辨率小于 576 像素和 750 像素到 900 像素之间时，需要按照 CSS 应用这些按钮。请帮助我了解如何编写条件媒体查询以应用以下 CSS。

padding-left: 1rem;
padding-right: 1rem;
font-size: 1.1rem;

【问题讨论】：

【解决方案1】：

使用此查询并将您的代码粘贴到两者中。

@media only screen and (max-width: 576px)  {...}
@media only screen and (min-width: 750px) and (max-width: 900px)  {...}

【讨论】：

谢谢，但是这两个可以放在一些条件语句中吗？
好吧，如果您想在条件语句中执行此操作，则必须使用 JQuery window.width 函数。请参阅下面的链接stackoverflow.com/questions/7715124/…
谢谢阿希尔。我试过你的解决方案。它有效，但不适用于某些分辨率。我实际上需要在此页面上保持所有三个按钮线性。您能否在此页面上尝试您的 CSS 解决方案packedwithpurpose.gifts/gift-concierge？
有空的时候请看一下。