Forms 基于媒体查询的不同表单

我有一张表格，上面有很多选项可供选择。根据屏幕大小，我希望有不同的方式来显示这些选项。如果是大屏幕，我想将它们显示为常规列表，每个项目都有一个复选框。如果它是一个小屏幕，我想有一个单一的选择字段。这可能吗？如果是，怎么做

大屏幕：

    <form>
     <ul>
      <li><input type="checkbox" name="category[]" value="1" checked="checked"/>Text</li>
      <li><input type="checkbox" name="category[]" value="2"/>Text</li>
     </ul>
    </form>

小屏幕：

    <form>
     <select name="rating" multiple="multiple">
      <option value="1">Text</option>
      <option value="2" selected="selected">Text</option>
     </select>
    </form>

---

最简单的方法是-通过mediaquery显示/隐藏元素select或ul：

---

例如，对于低屏幕：{display:none；}-对于ul，对于{display:block；}-对于从用户体验角度选择

，这意味着在大屏幕上，用户可以选择多个值作为复选框，而在小屏幕上，只允许选择一个值

从编码维护的角度来看，如果表单有两个集合，则意味着每个更改的选项都有两个值要更改

---

首先，我想应该确定它是否真的需要你：用户在大屏幕上有更多的选择，而在小屏幕上只有一个选择。

是的。但在源代码中仍然有这两种方法。如果用户提交表单，则始终会提交最后一个表单的小屏幕表单中的值。这不是css问题。这是php的问题。您可以通过JS解决它。选择一些复选框-更改select的值！当你在选择中选择另一个选项时，改变复选框：这很容易；你能行！我相信你！呵呵。好主意！我试试看，你说得对。我忘了在选择中添加多个。