CSS 项目帮助。 当 window 比 600px 宽时，页面需要有一个 600px 的“表单”元素，并且

Question

CSS 项目帮助。 当 window 比 600px 宽时，页面需要有一个 600px 的 'form' 元素，当屏幕宽度小于 600px 时，它是屏幕的宽度。

它似乎在屏幕超过 600px 时有效，但当屏幕缩小到 600px 以下时，它不会保持屏幕宽度。

 .card { height: 335px; width: 344px; border: lightgrey; border-style: solid; margin-left: auto; margin-right: auto; font-family: Arial, Helvetica, sans-serif; transition: box-shadow; }.card:hover { box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3); }.card-body { padding: 16px; font-size: 11px; color: #232f34; }.card_image { width: 100%; height: 194px; }.person { height: 50px; border-radius: 40px; float: left; margin: 0 1rem; }.title { display: inline; color: #000; font-size: 22px; padding: 16px; }.secondary { color: #232f34; display: inline; padding: 16px; }.myform { max-width: 600px; } @media screen { nav { position: static; height: auto; } } @media screen and (min-width: 600px) { form { display: grid; grid-template-columns: 600px; } }

 <form method="post" action="/pets"> <label for="name">Name</label> <input name="pet_name" id="name" type="text" /> <br> <label for="type">Type</label> <select name="pet_type" id="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> <br> <label for="bio">Biography</label> <textarea name="pet_bio" id="bio"></textarea> <br> <label for="owner-email">Owner's Email</label> <input name="pet_owner_email" id="owner-email" type="text" /> <br> <button class="new-pet-submit-button" type="submit"> Create new pet </button> <button class="Reset" type="reset">Reset</button> <form class='myform'> My form. </form> </form> <br> <br> <div class="card"> <img src="images/desert.jpg" id="desert" class="card_image"> <img src="images/person-avatar.jpg" class="person"> <h1 class="title">Title goes here</h1> <h3 class="secondary">Secondary text</h3> <p class="card-body"> Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p> </div>

Answer 1

您不需要为此进行媒体查询。 只需使用max-width 。

 body { margin: 0; }.myform { border: 1px solid blue; margin-inline: auto; padding: 1rem; /* here's where the magic happens */ max-width: 600px; }

 <form class = 'myform'> My form! </form>

编辑添加如果屏幕大于 600px 时的行为是您想要的，则将网格元素设置为 max-width: 600px 并将 grid-template-columns 设置为 1fr，如下所示。 我还使左右边距自动使表格与您的卡片一起居中。

 document.getElementsByTagName("h1")[0].style.fontSize = "6vw";

 .card { height: 335px; width: 344px; border: lightgrey; border-style: solid; margin-left: auto; margin-right: auto; font-family: Arial, Helvetica, sans-serif; transition: box-shadow; }.card:hover { box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3); }.card-body { padding: 16px; font-size: 11px; color: #232f34; }.card_image { width: 100%; height: 194px; }.person { height: 50px; border-radius: 40px; float: left; margin: 0 1rem; }.title { display: inline; color: #000; font-size: 22px; padding: 16px; }.secondary { color: #232f34; display: inline; padding: 16px; } /* got rid of the media query and added this */ form { margin-inline: auto; display: grid; grid-template-columns: 1fr; max-width: 600px; }

 <form method="post" action="/pets"> <label for="name">Name</label> <input name="pet_name" id="name" type="text" /> <br> <label for="type">Type</label> <select name="pet_type" id="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> <br> <label for="bio">Biography</label> <textarea name="pet_bio" id="bio"></textarea> <br> <label for="owner-email">Owner's Email</label> <input name="pet_owner_email" id="owner-email" type="text" /> <br> <button class="new-pet-submit-button" type="submit"> Create new pet </button> <button class="Reset" type="reset">Reset</button> </form> <br> <br> <div class="card"> <img src="https://picsum.photos/id/46/200/300" id="desert" class="card_image"> <img src="https://picsum.photos/id/64/200/300" class="person"> <h1 class="title">Title goes here</h1> <h3 class="secondary">Secondary text</h3> <p class="card-body"> Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p> </div>

Answer 2

当 window 比 600px 宽时，要使表单元素的宽度为 600px，可以在 CSS 中使用媒体查询：只有当视口宽度大于或等于 600px 时，此媒体查询才会在其中应用 styles。 要使表单元素在 window 小于 600px 宽时具有不同的宽度，可以使用另一个媒体查询：