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

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