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">

Answer 2

使用这个css

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

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

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

Answer 3

这就是解决方案：谢谢你们！

/* 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;
  }
}

Css 中的响应式网站无法使用媒体查询

Responsive Website not working with Media Queries in Css

css

responsive