WordPress主题响应使用@media不工作

Question

我是 WordPress 新手，希望我能正确解释我的问题。

我正在使用带有子主题和自定义代码的 Genesis 主题。子主题是响应式的，我的自定义代码包含以下规则：

h1 {
  font-size: 30px;
  margin: 0 0 10px 240px;
}

.picture {
  float: left;
  margin-left: 110px;
  margin-top: 65px;
  margin-bottom: 30px;
}

请注意，我的大部分页面都使用自定义代码类，而不是子主题中的代码类。我听说我应该在自定义代码中尝试@media 以使其响应。我使用以下方法对其进行了测试：

@media only screen and (max-width: 480px) {
  #content {
   max-width: 600px;
  width: 66.7%; 
 }
#sidebar {
  max-width: 300px;
  width: 33.3%; 
 }
}

但它根本没有效果。任何评论都会有所帮助。

提前致谢！

Answer 1

你试过@media query这种方法吗？

/* Smartphones (portrait and landscape) ----------- */
@media only screen
 and (min-device-width : 320px)
 and (max-device-width : 480px) {
/* Styles */
}