媒体属性不适用于响应式代码

Question

我创建了一个联系表单，它具有桌面模式的特定属性。在桌面模式下，div 的宽度需要为 60%，而在移动设备上我需要它 99%，但@media不起作用。 .

<div class="content-parent">
<div class="container1">
<form action="/action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" 
placeholder="David">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" 
placeholder="Jones">
<label for="country">Category</label>
<select id="country" name="country">
<option value="australia">Support Department</option>
<option value="canada">Sales Department</option>
<option value="usa">Billing Department</option>
</select>
<label for="subject">Messge</label>
<textarea id="subject" name="message" placeholder="Begin 
your message here" style="height:200px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
```@media only screen and (max-width: 600px) {
.container1 {
width: 100%;
}
}


.container1 {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
width: 60%;
display: inline-block;
}

Answer 1

在你的风格之后添加这样

.css

.container1 {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
width: 60%;
display: inline-block;
}
@media only screen and (max-width: 767px) {
.container1 {
width: 100%;
}
}