在前端开发中，为了避免浏览器默认样式的影响，我们通常会使用 CSS Reset 来重置页面样式。但是，使用 CSS Reset 后，表单的宽度通常会变得非常宽，这会影响页面的美观和用户体验。那么，我们该如何调整表单的宽度呢？
问题分析
在了解如何调整表单宽度之前，我们需要先了解问题的原因。使用 CSS Reset 后，表单的宽度会变得非常宽，这是因为浏览器默认样式中，表单有一个默认的最小宽度，而 CSS Reset 将这个最小宽度去掉了。因此，我们需要手动设置表单的宽度，以达到我们想要的效果。
解决方案
1. 使用百分比设置宽度
我们可以使用百分比来设置表单的宽度，这样就可以根据父元素的宽度来自适应调整表单的宽度。例如：
form {
width: 80%;
}这样，表单的宽度就会占据父元素的 80%。
2. 使用固定宽度
除了使用百分比设置宽度外，我们还可以使用固定宽度来设置表单的宽度。但是，需要注意的是，固定宽度可能会导致在不同屏幕尺寸下表单的宽度不一致，因此需要根据实际情况来决定是否使用固定宽度。
form {
width: 500px;
}这样，表单的宽度就会固定为 500px。
3. 使用媒体查询
如果我们希望在不同的屏幕尺寸下表单的宽度不同，可以使用媒体查询来实现。例如，当屏幕宽度小于 768px 时，表单的宽度为 100%；当屏幕宽度大于等于 768px 时，表单的宽度为 50%。
-- -------------------- ---- -------
---- -
------ -----
-
------ ------ --- ----------- ------ -
---- -
------ ----
-
-这样，当屏幕宽度小于 768px 时，表单的宽度会占据整个屏幕宽度，当屏幕宽度大于等于 768px 时，表单的宽度会缩小为父元素宽度的一半。
总结
使用 CSS Reset 后，调整表单的宽度是一个常见的问题。我们可以使用百分比、固定宽度或媒体查询来实现。但是，需要注意的是，不同的方法适用于不同的场景，需要根据实际情况来决定使用哪种方法。同时，在调整表单宽度的同时，也需要考虑到页面的美观和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/663ee951d3423812e4d25e84