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

【问题标题】：CSS - Media Query not functioning correctlyCSS - 媒体查询无法正常运行
【发布时间】：2019-11-21 04:17:07
【问题描述】：

在我的项目中，我有一个 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 %}

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

【问题讨论】：

媒体查询正在运行。 left: 10px 已应用。在 codepen 上测试了你的代码。你预计会发生什么？
@epanalepsis 你好！我希望表单向右移动 10px
@epanalepsis 检查我更新的代码。
我在你的问题中添加了一个 Stack Snippet，如果你点击 Run code sn-p，你可以看到它在工作……背景是红色的。
@epanalepsis 顺便提一下，这个 DIV 中有嵌套元素。像图像等，它们的位置都设置为相对。这有什么不同吗？

标签： html css media-queries

【解决方案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;
    }
  }

【讨论】：

@eweee 只需评论 margin-left 和 margin-top，以便媒体查询正常工作。
你好，这个解决方案（注释掉边距）也不起作用。
@AnshulChaurasia 请edit你的答案，并把解释放在答案中。还请解释为什么更改边距会影响定位的适用性。
@eweee make left : 100px 看看效果，两边的边距都要注释掉。
@AnshulChaurasia 是的，我有。检查我更新的代码以查看问题是否可能在我的 Div 中出现？谢谢。

【解决方案2】：

添加

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

在你的标题中

【讨论】：

在css之前还是之后？
在css之前我添加它。
尝试使用其他一些属性，只是为了测试它，并尝试在 ';' 之前添加 !important
我已经添加了重要的行和一些额外的属性但是仍然没有发生变化