Question

我有一个带有输入字段的简单表格。现在，在笔记本电脑屏幕上，输入的宽度占据了正确屏幕的30％。

但是，我想做的是，如果设备的宽度小于或等于600像素（移动设备），则将宽度增加到60％。

问题在于它没有改变移动设备的宽度。似乎它仅占移动设备的30％，而不是60％。我不确定我在基于研究使用@media标签时在做错什么。

    <section id="marketing-email">
    <form class="marketing-email-form" method="post" action="https://metis-online.com/marketing-email.php">
    <div>
    <label for="email"><b>Be part of our mailing list to receive exclusive promotional offers on our courses and services:</b></label><br/>
    <input type="email" id="market-email" name="market-email" required placeholder="Email"/> 
    <button type="submit" class="marketing-btn">Send</button>
    </div>
        </form>
   </section>

@media only screen and (max-width: 600px) {

    #market-email{
        width:60%;
    }

  }

/*--------Marketing Email-------*/

#marketing-email{
    padding: 1em;
    width:100%;
    text-align:center;
}

#market-email{
    padding: 0.5em;
    width:30%;
}

.marketing-btn{
    background: #1034A6;
    color:white;
    padding: 0.5em;
}

Answer 1

只需将@media only screen and (max-width: 600px)部分移至页面末尾。因为现在第二个带有#market-email的代码width:30%;重写了@media规则。

Answer 2

在CSS中，文档中稍后出现的样式将覆盖之前的样式。因此，最具体的@media查询必须始终排在文档的最后。

目前，width: 30%;适用于所有屏幕尺寸，出现在文档的后面，因此覆盖了width: 60%;的早期样式。

解决方案只是更改@media查询在CSS中的位置：

#marketing-email {
  padding: 1em;
  width: 100%;
  text-align: center;
}

#market-email {
  padding: 0.5em;
  width: 30%;
}

.marketing-btn {
  background: #1034A6;
  color: white;
  padding: 0.5em;
}


/* Media query comes after other styles */

@media only screen and (max-width: 600px) {
  #market-email {
    width: 60%;
  }
}

Answer 3

在移动设备上宽度未增加到60％的原因是因为在您的CSS代码中，您首先说#market-email的宽度应为60％，然后您将其重置为30％

以下是如何正常工作：

#marketing-email{
  padding: 1em;
  width:100%;
  text-align:center;
}

#market-email{
  padding: 0.5em;
  width:30%;
}

.marketing-btn{
  background: #1034A6;
  color:white;
  padding: 0.5em;
}

@media only screen and (max-width: 600px) {
  #market-email{
    width:60%;
  }
}

输入字段未增加移动设备屏幕HTML / CSS的宽度

3 个答案: