输入字段没有增加移动设备屏幕 HTML/CSS 的宽度答案

【问题标题】：Input field is not increasing width for mobile device screen HTML/CSS输入字段没有增加移动设备屏幕 HTML/CSS 的宽度
【发布时间】：2020-09-03 14:45:29
【问题描述】：

我有一个带有输入字段的简单表单。现在在笔记本电脑屏幕上，输入的宽度占屏幕的 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;
}

【问题讨论】：

CSS 中的顺序很重要！目前，文档中稍后出现的样式会覆盖之前的设置。请参阅我的答案以获得解决方案。

标签： html css

【解决方案1】：

在移动设备上宽度没有增加到 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%;
  }
}

【讨论】：

【解决方案2】：

在 CSS 中，文档中较晚出现的样式会覆盖较早的样式。因此，最具体的@media 查询必须在文档中始终排在最后。

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

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

#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%;
  }
}

【讨论】：

【解决方案3】：

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

【讨论】：