Question

它没有那么顺利......如果屏幕很小，右侧边栏就会消失，但是顶边栏留在那里我不明白为什么......在摆弄了几个小时后我决定寻求帮助。

网站http://www.notloli.com.br

{{1}}

请帮助我......谢谢

Answer 1

因此，如果屏幕是＆＃34;大＆＃34;你有侧栏和没有顶栏，如果屏幕很小，你有顶杆，没有侧栏，对吗？我认为你混淆了可见性：可见display：none和display：inline-block，还可以为main和side div创建父级。试试这个：

<html><head>  
<style type="text/css">
body{
width:100%;
height:100%;
margin:0px;
background-color:#aaa;
font-family:trebuchet ms, tahoma;
}


@media screen and (min-width:900px){.sidebartop{display:none}}

@media screen and (min-width:900px){body{font-weight:bold}}


.mainbox{display:inline-block;width:70%;min-width:600px}

.sidebar{
position:fixed;
right:0px;
height:100%;
z-index:2;
background-color:#9374a4;
width:300px;
color:#fff;
margin:0px;
display:inline-block;
padding:15px;
box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
border-left:1px solid pink;
}
@media screen and (max-width:899px){.sidebar{display:none}}

.sidebartop{
top:0px;
position:fixed;
z-index:2;
width:100%;
margin:0px;
padding:15px;
box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
height:200px; 
background-color:#abab63;
}
</style></head><body>
<div class="sidebartop"></div>
<div>
<div class="mainbox"></div><div class="sidebar"></div>
</body></html>

我没有尝试所有兼容性它只是一个教程示例

第一次使用@media屏幕

1 个答案: