改变 UI 控制的 CSS 媒体查询

Question

我想知道是否可以使用媒体查询来根据屏幕尺寸呈现不同的 UI 控件。我想使用 radio 控制来收集台式机和平板电脑的调查问题，并使用下拉选择移动设备的控件，因为对手机使用 radio 会使屏幕变得困惑。

请帮忙!

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

如果您不希望这种行为无处不在，您也可以使用自定义类。