如何使用媒体查询实现屏幕小于600px时表单及元素全屏宽度？

你的代码存在几个语法和属性使用错误，以下是修正后的实现方式：

问题分析 #

1. display: max-width 是错误用法：display 用于控制元素的显示模式（比如块级、行内等），而 max-width 是独立的宽度属性，不能放在 display 后。
2. 媒体查询语法错误：第二个 @media 嵌套在第一个里面，且没有闭合大括号，导致CSS解析失败。
3. 仅设置div宽度不够：表单内的输入框、标签等元素可能自带默认宽度，需要统一设置。

修正后的代码 #

/* 基础样式（可选，用于非移动端的默认布局） */
.form {
  max-width: 600px; /* 非移动端的最大宽度 */
  margin: 0 auto; /* 居中显示 */
}

/* 移动端媒体查询：屏幕宽度小于600px时生效 */
@media screen and (max-width: 600px) {
  /* 让表单占满屏幕宽度 */
  .form {
    width: 100%;
    padding: 0 10px; /* 可选：添加左右内边距避免贴边 */
    margin: 0;
  }

  /* 让表单内的所有嵌套元素（div、标签、输入框等）占满宽度 */
  .form div,
  .form label,
  .form input,
  .form textarea,
  .form select {
    width: 100%;
    box-sizing: border-box; /* 关键：确保内边距和边框不会超出宽度 */
  }
}

关键说明 #

• box-sizing: border-box：必须添加，否则元素的内边距（padding）和边框（border）会额外增加宽度，导致超出屏幕。
• 直接指定表单内的具体元素（如input、label）比只选div更可靠，避免某些嵌套层级下的样式失效。
• 可以根据需求调整padding值，避免表单元素完全贴紧屏幕边缘，提升移动端体验。

内容的提问来源于stack exchange，提问作者mitoman