css - *仅使用 min-width* 隐藏 div 元素

Question

仅使用 min-width我想隐藏challange-target408px 以下的元素并显示 challange-target高达408px.

我尝试了这段代码，但它不起作用：

@media only screen and (min-width: 408px) {
    .challange-target {
        display: block;
    }
}

有任何想法吗？

这是jsfiddle链接

Answer 1

你的意思是当屏幕宽度< 408时要隐藏.challenge-target，当屏幕宽度> = 408px时显示为408px？

最小的优先；隐藏那个元素

.challange-target {
    display: none;
}

@media only screen and (min-width: 408px) {
    .challange-target {
        display: block;
        width:408px;
    }
}