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屏幕和”，而不是媒体。示例：

/* 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标签

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

Answer 2

使用此CSS

public class Enrolment {

    private List<Lecture> lectures;
    private List<Tutorial> tutorials;

    public Enrolment() {
        this.lectures = new ArrayList<>();
        this.tutorials = new ArrayList<>();
    }

    public void addSession(Session session) {
        if (session instanceof Lecture) {
            lectures.add((Lecture) session);
        } else if (session instanceof  Tutorial) {
            tutorials.add((Tutorial) session);
        }
    }

    public List<Lecture> getLectures() {
        return lectures;
    }

    public List<Tutorial> getTutorials() {
        return tutorials;
    }

    public List<Session> getAllSessions() {
        ArrayList<Session> sessions = new ArrayList<>(lectures);
        sessions.addAll(tutorials);
        return sessions;
    }
}

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中的媒体查询一起使用

3 个答案: