Question

我正在尝试创建一个样式表为HTML的HTML页面，该样式表使用CSS工作表进行样式设置，以使表单的宽度为600px，并在屏幕大于或等于600px时使用网格布局来布局标签和表单元素，并且是屏幕的宽度，当屏幕宽度小于600像素时，将标签和表单元素布置为全宽。

以下是我的HTML标记：

             <head>
               <meta charset="UTF-8">
               <meta name="viewport" content="width=device-width, initial-scale=1.0">
               <meta http-equiv="X-UA-Compatible" content="ie=edge">
               <title>App Academy HTML/CSS Assessment</title>
               <link href="site.css" rel="stylesheet">
             </head>

             <body>
               <form id="form" action="/pets" method="POST">
                 <fieldset>
                   <div>
                     <label for="name">Name</label>
                     <input type="text" id="name" name="pet_name">
                   </div>
                   <div>
                     <label for="type">Type</label>
                     <select id="type" name="pet_type">
                       <option value="cat">Cat</option>
                       <option value="dog">Dog</option>
                       <option value="hamster">Hamster</option>
                       <option value="other">Other</option>
                       <option value="zebra">Zebra</option>
                     </select>
                   </div>
                   <div>
                     <label for="bio">Biography</label>
                     <textarea id="bio" name="pet_bio"></textarea>
                   </div>
                   <div>
                     <label for="owner-email">Owner's Email</label>
                     <input type="email" id="owner-email" name="pet_owner_email">
                   </div>
                   <div>
                     <button type="submit" id="new-pet-submit-button">Create new pet</button>
                   </div>
                   <div>
                     <button type="reset">Reset</button>
                   </div>
                 </fieldset>
               </form>
             </body>

             </html>

以下是我的CSS标记：

             @media screen and (min-width: 600px;) {
              form {
                display: grid;
                position: relative;
                width: 600px;
              }
             }

             @media screen and (max-width: 599px;) {
               form {
                 display: inline;
                 position: relative;
                 width: 100%;
               }
             }

我已经尝试过此样式以及CSS布局的其他几种形式，但是如果没有响应式设计，我什至无法将表单大小调整为600px。任何帮助将不胜感激。预先谢谢你！

Answer 1

在媒体查询的最小宽度和最大宽度的末尾删除分号。错误就在这里。删除后，请应用您的CSS样式。

    @media screen and (min-width: 600px) {
              form {
                display: grid;
                position: relative;
                width: 600px;
                margin: 0 auto
              }
             }

             @media screen and (max-width: 599px) {
               form {
                 display: inline!important;
                 position: relative;
                 width: 100%;
               }
             }

   <head>
               <meta charset="UTF-8">
               <meta name="viewport" content="width=device-width, initial-scale=1.0">
               <meta http-equiv="X-UA-Compatible" content="ie=edge">
               <title>App Academy HTML/CSS Assessment</title>
               <link href="site.css" rel="stylesheet">
             </head>

             <body>
               <form id="form" action="/pets" method="POST">
                 <fieldset>
                   <div>
                     <label for="name">Name</label>
                     <input type="text" id="name" name="pet_name">
                   </div>
                   <div>
                     <label for="type">Type</label>
                     <select id="type" name="pet_type">
                       <option value="cat">Cat</option>
                       <option value="dog">Dog</option>
                       <option value="hamster">Hamster</option>
                       <option value="other">Other</option>
                       <option value="zebra">Zebra</option>
                     </select>
                   </div>
                   <div>
                     <label for="bio">Biography</label>
                     <textarea id="bio" name="pet_bio"></textarea>
                   </div>
                   <div>
                     <label for="owner-email">Owner's Email</label>
                     <input type="email" id="owner-email" name="pet_owner_email">
                   </div>
                   <div>
                     <button type="submit" id="new-pet-submit-button">Create new pet</button>
                   </div>
                   <div>
                     <button type="reset">Reset</button>
                   </div>
                 </fieldset>
               </form>
             </body>

             </html>

使用表单实施自适应设计时遇到问题

1 个答案: