Question

我的网页设计包括一个侧边栏和文章部分。在重新调整网页大小时，侧边栏应该会消失，右边会出现新按钮。但是，我不知道如何消失侧边栏并在右侧放置新的边栏。我该怎么办？

页

________  _____                                  _________  ___
|      |  |   |   after re-sizing viewport,      |        | | |
|      |  |   |   I should get this web page --> |        | |_|
|      |  |   |                                  |        | 
|      |  |   |                                  |        |
|______|  |___|                                  |________|

我已经实现了索引html，如;

<link   href="css/large-page-design.css"    
        rel="stylesheet"    
        type="text/css" />

<link   href="css/medium-page-design.css"  
        rel="stylesheet"    
        type="text/css" 
        media="only screen and (min-width: 700px ) and (max-width: 1000px) and (min-height: 500px)">

而且，在index.html中，我填写了侧栏内容，如;

<div id="sidebar">

    <div id="page-information">
            <h1>My web page</h1>
    </div>
    <!-- other two div elements with its content-->
</div>

除了html之外，我已将large-page-design.css声明为;

@import url('sidebar.css') screen;

#sidebar{
    top:0px;
    height: 519px; 
    width: 325px;
    float: right;
    background: none; 
    position:relative; 
}

，在sidebar.css，我有;

#page-information{
    background-image:url(...);
    background-repeat: no-repeat;
    height: 75px;
    width: 300px;
    position:relative;
}

Answer 1

使用媒体查询隐藏侧栏并使用display property

显示按钮

在big-page-design.css

中添加

#sideButton{
   display:none;
   }

在medium-page-design.css

中添加

 #sidebar{
     display:none;
   }
   #sideButton{
     display:block;
    }

在Html中有一个#sideButton元素

如何删除侧边栏以使网页更具响应性

1 个答案: