Question

在我的项目中，我有一个div，当屏幕达到特定大小时，我想移动其位置。我尝试进行媒体查询以执行此操作，但是无论屏幕大小如何，表单仍停留在一个位置。

这是我的代码：

.formContainer {
  position: relative;
  border: 1px solid #e0e0e0;
  width: 400px;
  height: 550px;
  margin-left: 768px;
  margin-top: 140px;
}

@media screen and (max-width: 1200px) {
  .formContainer {
    background-color: red;
  }
}

<div class="formContainer">
  ....
</div>

HTML：

<div class="formContainer">
 ....
</div>

CSS：

.formContainer {
  position: relative;
  border: 1px solid #e0e0e0;
  width: 400px;
  height: 550px;
  margin-left: 768px;
  margin-top: 140px;
}

@media screen and (max-width: 1200px) {
    .formContainer {
      left: 10px;
    }
  }

已更新：

@media screen and (max-width: 1200px) {
    .formContainer {
      left: -10000px;
    }
  }

更新2：

@media screen and (max-width: 1200px) {
    .formContainer {
      background-color: red;
    }
  }

代码：

<div class="formContainer">
  <div class="innerContainer">
  </div>

  <img class="test233" src="{% static 'mosque.png' %}" width="70px" style="position: relative; top: -75px; left: 60px;">
  <span style="position: relative; top: -60px; left: 60px; font-size: 32px; font-family: serif;" class="innerText"> Islamagram </span>

    <h2 style="position: relative; font-size: 21px;left:62px; font-family: sans-serif; color: #999999; top: -46px;">&nbsp;Sign up to view and share<br>life-changing islamic content.</h2>

  <form class="form" method="post" autocomplete="off">
    {% csrf_token %}
    {% for field in form %}
      {{ field  }}
      <br>
    {% endfor %}
    <button type="submit"class="btn btn-primary subButton"><span class="signupText">Sign Up</span></button>
  </form>
  {% if error1 %}
    <span style="position: relative; color: red; font-size: 18px; left: 69px; top: 10px;">{{  error1 }}<span>
  {% endif %}
  {% if error2 %}
    <span style="position: relative; color: red; font-size: 18px; left: 68px; top: 10px;">{{  error2 }}</span>
  {% endif %}
  {% if error3 %}
    <span style="position: relative; color: red; font-size: 18px; left: 118px; top: 10px;">{{  error3 }}</span>
  {% endif %}
  {% if error4 %}
    <span  style="position: relative; color: red; font-size: 18px; left: 84px; top: 10px;">{{  error4 }}</span>
  {% endif %}

有人知道这个问题吗？谢谢。

Answer 1

.formContainer {
  position: relative;
  border: 1px solid #e0e0e0;
  width: 400px;
  height: 550px;
  margin-left: 768px;
  margin-top: 140px;
}

@media screen and (max-width: 1200px) {
    .formContainer {
      left: -200px;
    }
  }

Answer 2

添加

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

在标题中

CSS-媒体查询无法正常运行

2 个答案: