Question

我想根据屏幕尺寸分别显示三篇文章。

第1条仅在<600

时可见

第2条应该在600到900之间可见

第3条应该在> 900时可见

这是CSS声明：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="stijlen/r0755939basis.css">
<link rel="stylesheet" media="screen and (min-width: 600px)" href="stijlen/r0755939medium.css" />
<link rel="stylesheet" media="screen and (min-width: 900px)" href="stijlen/r0755939groot.css" />

所有文章均采用以下格式：

    <article id="article1"><p>article1</p></article>

我在每个样式表中应用了以下CSS，但article [number]不同：

article {
    display: none;
}

#article1{
    display: block;
}

会发生什么，只有<600是正确的。较大的一个显示1和2，最后一个显示所有这些。

这种行为的原因是什么？

Answer 1

您可以有条件地使用max-width和min-width

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="stijlen/r0755939basis.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="stijlen/r0755939medium.css" />
<link rel="stylesheet" media="screen and (min-width: 600px) and (max-width: 900px)" href="stijlen/r0755939groot.css" />

Answer 2

只需在css文件中添加媒体即可。

<article id="article1"><p>article1</p></article>
<article id="article2"><p>article2</p></article>
<article id="article3"><p>article3</p></article>

CSS

article{
    display: none;
}
@media screen and (max-width: 600px) {
    #article1{display: block;}
}
@media (min-width:600px)and (max-width:900px){
    #article2{display: block;}
}
@media screen and (min-width: 900px) {
    #article3{display: block;}
}

旧的显示值保留在切换CSS文件上

2 个答案: