Question

我已经将它们创建到文本框中，并想向它们添加响应性，但是，由于某些原因，添加@media无效。当屏幕尺寸小于x像素时，我希望右框移动到左框下方。

/* CSS Document */

* {
  box-sizing: border-box;
}

#fullbodybg {
  margin-top: 20%;
}


/* Create two unequal columns that floats next to each other */

.column {
  float: left;
  padding: 10px;
  height: auto;
  /* Should be removed. Only for demonstration */
}

@media screen and (max-width: 1000px) {
  .column {
    width: 100%;
  }
}

.left {
  margin-left: 10%;
  width: 25%;
}

.right {
  margin-right: 10%;
  width: 55%;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}

.row {
  font-family: lato;
  font-style: normal;
  font-weight: 100;
  font-size: 15px;
  text-align: left;
}

<div class="row">
  <div class="column left">
    <h2>Angaben gem&auml;&szlig; &sect; 5 TMG</h2>
    <p>Max Muster<br>Musterweg<br>12345 Musterstadt<br><br>Vertreten durch:<br>Max Muster<br><br>Kontakt:<br>Telefon: 01234-789456<br>Fax: 1234-56789<br>E-Mail: max@muster.de<br><br>Umsatzsteuer-ID:<br>Umsatzsteuer-Identifikationsnummer gem&auml;&szlig;
      &sect;27a Umsatzsteuergesetz: Musterustid.<br><br>Wirtschafts-ID:<br>Musterwirtschaftsid<br><br>Aufsichtsbeh&ouml;rde:<br>Musteraufsicht Musterstadt</p>
  </div>
  <div class="column right">
    <h2>Haftungsausschluss:</h2>
    <p>Zweck einverstanden.</p>
  </div>
</div>

Answer 1

它是关于CSS优先级的，您可以在Google上阅读它。有一些规则。

根据您的情况，您可以将@media查询放在您的左右CSS下方（最好是底部的媒体）。或在媒体查询中为CSS添加重要内容（这不是一个好习惯，但可以完成工作）。

解决方案1。

* {
            box-sizing: border-box;
        }

        #fullbodybg {
            margin-top: 20%;
        }

        /* Create two unequal columns that floats next to each other */
        .left {
            margin-left: 10%;
            width: 25%;
        }

        .right {
            margin-right: 10%;
            width: 55%;
        }

        /* Clear floats after the columns */
        .row:after {
            content: "";
            display: table;
            clear: both;
        }

        .row {
            font-family: lato;
            font-style: normal;
            font-weight: 100;
            font-size: 15px;
            text-align: left;
        }
        .column {
            float: left;
            padding: 10px;
            height: auto;
            /* Should be removed. Only for demonstration */
        }

        @media screen and (max-width: 1000px) {
            .column {
                width: 100%;
            }
        }

<div class="row">
        <div class="column left">
            <h2>Angaben gem&auml;&szlig; &sect; 5 TMG</h2>
            <p>Max Muster<br>Musterweg<br>12345 Musterstadt<br><br>Vertreten durch:<br>Max
                Muster<br><br>Kontakt:<br>Telefon: 01234-789456<br>Fax: 1234-56789<br>E-Mail:
                max@muster.de<br><br>Umsatzsteuer-ID:<br>Umsatzsteuer-Identifikationsnummer gem&auml;&szlig; &sect;27a
                Umsatzsteuergesetz:
                Musterustid.<br><br>Wirtschafts-ID:<br>Musterwirtschaftsid<br><br>Aufsichtsbeh&ouml;rde:<br>Musteraufsicht
                Musterstadt</p>
        </div>
        <div class="column right">
            <h2>Haftungsausschluss:</h2>
            <p>Zweck einverstanden.</p>
        </div>
    </div>

解决方案2。

/* CSS Document */

* {
  box-sizing: border-box;
}
#fullbodybg {
	margin-top: 20%;
}

/* Create two unequal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
  height: auto; /* Should be removed. Only for demonstration */
}
@media screen and (max-width: 1000px) {
  .column {
    width: 100% !important;
  }
}

.left {
margin-left: 10%;
  width: 25%;
}

.right {
	margin-right: 10%;
  width: 55%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.row {
    font-family: lato;
    font-style: normal;
    font-weight: 100;
    font-size: 15px;
    text-align: left;
}

<div class="row">
        <div class="column left">
            <h2>Angaben gem&auml;&szlig; &sect; 5 TMG</h2>
            <p>Max Muster<br>Musterweg<br>12345 Musterstadt<br><br>Vertreten durch:<br>Max
                Muster<br><br>Kontakt:<br>Telefon: 01234-789456<br>Fax: 1234-56789<br>E-Mail:
                max@muster.de<br><br>Umsatzsteuer-ID:<br>Umsatzsteuer-Identifikationsnummer gem&auml;&szlig; &sect;27a
                Umsatzsteuergesetz:
                Musterustid.<br><br>Wirtschafts-ID:<br>Musterwirtschaftsid<br><br>Aufsichtsbeh&ouml;rde:<br>Musteraufsicht
                Musterstadt</p>
        </div>
        <div class="column right">
            <h2>Haftungsausschluss:</h2>
            <p>Zweck einverstanden.</p>
        </div>
    </div>

Answer 2

您的主要问题实际上是样式的顺序。发生的情况是您在.left和.right中的样式会覆盖您的@media样式。这应该是一个快速解决方案：

/* CSS Document */

* {
    box-sizing: border-box;
}
#fullbodybg {
    margin-top: 20%;
}

/* Create two unequal columns that floats next to each other */
.column {
    float: left;
    padding: 10px;
    height: auto; /* Should be removed. Only for demonstration */
}

.left {
    margin-left: 10%;
    width: 25%;
}

.right {
    margin-right: 10%;
    width: 55%;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

.row {
    font-family: lato;
    font-style: normal;
    font-weight: 100;
    font-size: 15px;
    text-align: left;
}

@media screen and (max-width: 1000px) {
    .column {
        width: 100%;
    }
}

我只是简单地移动了@media，以确保它在满足您设置的要求时覆盖所有其他样式。

即使设置了@media，列也没有响应？

2 个答案: