CSS媒体查询以更改UI控件

Question

我想知道我是否可以使用媒体查询根据屏幕大小呈现不同的UI控件。我想使用无线电控制来收集台式机和平板电脑的调查问题，以及用于移动设备的下拉选择控制，因为使用手机收音机会使屏幕变得混乱。

请帮忙！

Answer 1

将下拉列表和收音机放入html并有条件地隐藏它们：

<input type="radio" name="myinput[]" value="value1" />
<input type="radio" name="myinput[]" value="value2" />
<select name="myinput">
    <option value="value1">Value 1</option>
    <option value="value2">Value 2</option>
</select>

CSS：

@media screen and (max-width: 420px) { // adjust to desired width
    input[type="radio"] {
        display: none;
    }
}
@media screen and (min-width: 421px) { // adjust to desired width
    select {
        display: none;
    }
}

如果您不希望在任何地方出现此行为，也可以使用自定义类。