Question

首先发布在这里：

为WordPress网站编写自定义代码。 PHP和CSS工作正常（两者都是从头开始创建的自定义页面，但是＃34;插入＆＃34;到WordPress并正常渲染。）时间通过媒体查询开始编码各种大小。但首先，一个测试 - 我无法工作。我已在所有现成确认的工作样式表中放置了媒体查询。尝试/确认的事情不是问题：

•我有＆＃34;视口＆＃34;头脑中的代码（WordPress的header.php文件）

•我的媒体查询是＆＃34;默认＆＃34; CSS代码（见下文）

•尝试了最小宽度以及设备中间宽度以及@media only屏幕和@media屏幕 - 两者都不起作用（也没有各种组合）

•三重检查拼写和语法错误

•尝试在结肠周围放置空间（最小宽度：1200px）vs（最小宽度：1200px） - 没有

•网站中其他地方的预先存在的媒体查询在浏览器中呈现正常（即header.php，style.css等） - 但我的代码都是自定义的，使用独特的选择器，所以不应该这样做冲突 - 只是说＆＃34;它不是浏览器＆＃34;

•研究了这个网站和谷歌的答案，但似乎没有任何工作（我知道如上所述的视口与设备宽度问题） - 这些＆＃34;通常的嫌疑人＆＃34;一切似乎都没有问题。

所以

我错过了什么/做错了什么？

＆＃13;

.formtitle {
  font-size: 2.5em;
  color: #000;
  font-weight: bold;
  text-align: center;
  margin-bottom: .5%;
}

@media only screen and (min-width: 1200px) and (max-width: 1599px) {
  .formtitle {
    font-size: 2.5em;
    color: #f24950;
    font-weight: bold;
    text-align: center;
    margin-bottom: .5%;
  }
}

＆＃13;

<div class="smallform">
  <span class="formtitle">Contact Us Today!</span> [contact-form-7 id="12016" title="DitL Form"]
</div>

＆＃13;

Answer 1

我在搜索结果中找到了您的问题，并且遇到了同样的问题。

看来，WordPress并不喜欢Bootstrap用注释部分编写中介查询的方式。见下文。

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

应该是：

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) { ... }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }

/* Large devices (desktops, 992px and up) */ 
@media (min-width: 992px) { ... }

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

我认为您已经解决了所有问题，但是我认为这对其他正在寻找答案的人很有帮助:-)

媒体查询在WordPress中不起作用

1 个答案: