Question

我有一个包含大量选项列表的表单。根据屏幕尺寸，我希望有不同的方式来显示这些选项。如果它是一个大屏幕，我想将它们显示为常规列表，每个项目都有一个复选框。如果它是一个小屏幕，我想要一个选择字段。这可能吗？而且 - 如果是的话 - 怎么样？

大屏幕：

    <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>

Answer 1

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

例如，对于低屏幕：{display：none;} - 表示ul，{display：block;} - 表示选择

Answer 2

从用户体验的角度来看，这意味着在大屏幕上，用户可以选择多个值（它是复选框），而在较小的屏幕上，只允许1个值。

从编码维护的角度来看，如果您有两套表格，则表示您为每个更改的选项更改了两个值。

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

基于媒体查询的不同形式

2 个答案: