CSS 媒体查询在 Wordpress 网站上不起作用答案

【问题标题】：CSS Media Queries not working on Wordpress SiteCSS 媒体查询在 Wordpress 网站上不起作用
【发布时间】：2015-06-05 03:57:39
【问题描述】：

当浏览器面临不同的屏幕尺寸时，我正在尝试使我的 pdfs/mp3s/mp4s 编码按钮不会以不对称的方式相互堆叠。例如，当屏幕尺寸从大约 1200 像素宽的大型桌面变为 1024 像素到 768 像素（横向/纵向）的平板电脑分辨率时，按钮会以一种看起来低效/无意的方式相互堆叠。你自己看： http://www.mannachurch.org/portfolio-type/insights-from-the-bottom-bunk/

尝试将浏览器移至适合 13 英寸或平板电脑的设备，您就会明白我的意思。这只是按钮，其他一切看起来都很好。

我正在尝试在我的 header.php 文件中使用该 wordpress 网站上的媒体查询代码解决此问题：

 /* iPhones ----------- */
 @media only screen and (min-device-width : 320px) and (max-device-width : 480px){
    a .btn .pull-left {
    margin: auto 0 !important;
    display:inline-block;
}
    a .btn .pull-right{
    margin: auto 0 !important;
    display:inline-block;
    } 
}

@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
a .btn .pull-left {
    margin: auto 0 !important;
    display:inline-block;
        }
    a .btn .pull-right{
    margin: auto 0 !important;
    display:inline-block;
        } 

}

@media all and (min-width: 250px) and (max-width: 400px) {

    a .btn .pull-left {
    margin: auto 0 !important;
    display:inline-block;
        }
    a .btn .pull-right{
    margin: auto 0 !important;
    display:inline-block;
        } 
}


  /* iPad in landscape----------- */
  @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    a .btn .pull-left {
    margin: auto 0 !important;
    display:inline-block;
        }
    a .btn .pull-right{
    margin: auto 0 !important;
    display:inline-block;
        } 
    }

   /* iPad in portrait----------- */
   @media only screen and (min-device-width : 768px) and (max-device-width :     1024px) and (orientation : portrait){
    a .btn .pull-left {
    margin: auto 0 !important;
    display:inline-block;
        }
    a .btn .pull-right{
    margin: auto 0 !important;
    display:inline-block;
        } 
}



 /*Larger screens -----------*/
 @media only screen and (min-width : 1024px) and (max-width: 1224px)  {
    a .btn .pull-left {
    margin: auto 0 !important;
    display:inline-block;
        }
    a .btn .pull-right{
    margin: auto 0 !important;
    display:inline-block;
        } 
}

它不会让这些按钮做任何不同的事情！

我做错了什么？ Wordpress 已经够令人沮丧了，因为它层层叠叠地堆满了无穷无尽的 CSS 文件。但我很想知道为什么我不能抓住这些并让它们与媒体查询一起工作。我很确定我的声明是正确的。有什么建议吗？

【问题讨论】：

标签： css wordpress

【解决方案1】：

在您的 CSS 声明中省略空格，例如 a.btn.pull-left。

【讨论】：

【解决方案2】：

所有 wordpress 主题都带有自己的 style.css 文件。您应该编辑 .css 文件，而不是将 css 放入 php 文件 (header.php)。您的按钮覆盖应该在那里工作。

如果您不习惯在编辑器中编辑 style.css，大多数主题在主题选项中也有自己的自定义 css 字段。不过是一样的。

【讨论】：