css - 响应式网站不适用于 Css 中的媒体查询

Question

我在 Joomla 上运行一个小型网站，无法获得响应能力。我正在对屏幕尺寸运行媒体查询并根据需要进行调整，但无法让它们针对 760 像素宽以下的任何内容进行调整。

我已经检查了所有四个媒体查询，但找不到解决方案。我确定这很简单，但我找不到它。我愿意

/* Note: Design for a width of 768px */

@media (min-width: 768px) and (max-width: 959px) {
.main, #jf-footer .main-inner1 {
width: 768px;
}}

---

/* Note: Design for a width of 480px */

@media (min-width: 480px) and (max-width: 767px) {
.main, #jf-footer .main-inner1 {
width: 444px;
}}

---

/* Note: Design for a width of 320px */

@media (min-width: 320px) and (max-width: 767px){
.main, #jf-footer .main-inner1 {
width: 316px;
}}

我希望主 DIV 可以缩放 768px、480px 和 320px，但无法正确缩放。

该网站位于: https://crafted-development.com

我的 Css 位于: https://www.crafted-development.com/templates/jf_calla-exteriors/css/template.css

Answer 1

您还需要在末尾使用“}”关闭媒体标签 此外，尝试添加“@media only screen and”而不是媒体 例子::

/* Note: Design for a width of 320px */

    @media only screen and (min-width: 320px) and (max-width: 767px){
      .main, #jf-footer .main-inner1 {
        width: 316px;
      }
    }

此外，元标记是必要的

<meta name="viewport" content="width=device-width, initial-scale=1">