Php 媒体查询在WordPress中不起作用

第一篇帖子：

为WordPress站点编写自定义代码。PHP和CSS工作正常（都是从零开始创建的自定义页面，但正确地“插入”到WordPress并呈现良好状态）。是时候开始通过媒体查询为各种大小编码了。但首先是一个测试，我不能让它工作。我已经在所有已确认的工作样式表中放置了媒体查询。尝试/确认的事情不是问题：

•我的头部有“视口”代码（WordPress的header.php文件）

•我的媒体查询在“默认”CSS代码之后（见下文）

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

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

•尝试在冒号周围放置空格（最小宽度：1200px）与（最小宽度：1200px）-无

•网站其他地方预先存在的媒体查询在浏览器中呈现良好（即header.php、style.css等）-但我的代码都是自定义的，使用唯一的选择器，因此不应冲突-只说“它不是浏览器”

•在本网站和Google answers上进行了研究，但似乎没有任何效果（我注意到如上所述的视口与设备宽度的问题）——这些“常见疑点”似乎都没有问题

所以

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

.formtitle{
字号：2.5em；
颜色：#000；
字体大小：粗体；
文本对齐：居中；
利润底部：.5%；
}
@仅介质屏幕和（最小宽度：1200px）和（最大宽度：1599px）{
.formtitle{
字号：2.5em；
颜色：#f24950；
字体大小：粗体；
文本对齐：居中；
利润底部：.5%；
}
}

今天就联系我们！[contact-form-7 id=“12016”title=“DitL表单”]

我在搜索结果中找到了你的问题，也遇到了同样的问题

Wordpress似乎不喜欢Bootstrap编写带有注释部分的MediaQuery的方式。见下文

// 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似乎不喜欢Bootstrap编写带有注释部分的MediaQuery的方式。见下文

// 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) { ... }

---

我想你已经完全解决了这个问题，但我认为这对其他正在寻找答案的人是有帮助的：-）

我将你的代码转换为代码片段，它肯定能工作。我想说的是，在你的风格的其他地方，你可能有一个规则覆盖了这个。谢谢，选择器是独一无二的。（没有我“发明”的其他formtitle类）——也就是说，它不是WordPress工件的复制品，也不是在其他地方使用的。我不清楚如果这个规则不存在，另一个规则怎么会覆盖它。精心制作尽管如此，我还是尝试在我的媒体查询中添加更多的规则来测试你的猜测（使用唯一的名称）以及简单的ole HTML选择器，如“body”和“p”，但仍然…什么都没有）-我还“搜索”了网站使用的所有其他CSS表中的类formtitle，并且可以确认“formtitle”不在其他地方…清除缓存也不起作用\这是你住的地方吗？我可以看看。www.ico.edu/a-day-in-the-life我在你的css中没有看到媒体查询。它根本不存在。我把你的代码转换成了代码片段，它肯定能工作。我想说的是，在你的风格的其他地方，你可能有一个规则覆盖了这个。谢谢，选择器是独一无二的。（没有我“发明”的其他formtitle类）——也就是说，它不是WordPress工件的复制品，也不是在其他地方使用的。我不清楚如果这个规则不存在，另一个规则怎么会覆盖它。精心制作尽管如此，我还是尝试在我的媒体查询中添加更多的规则来测试你的猜测（使用唯一的名称）以及简单的ole HTML选择器，如“body”和“p”，但仍然…什么都没有）-我还“搜索”了网站使用的所有其他CSS表中的类formtitle，并且可以确认“formtitle”不在其他地方…清除缓存也不起作用\这是你住的地方吗？我可以看看。www.ico.edu/a-day-in-the-life我在你的css中没有看到媒体查询。它根本不存在。