Question

我在网站上有一个菜单：http://bit.ly/18zG5i7。如果窗口调整得更小，我试图缩小此菜单。

CSS

#menu_wrap
{
    max-width: 100%;
    position: fixed;
    top:50%;
    width: 100%;
    display: inline-block;
    bottom:0%;
    left:2%;
    z-index: 500;
}

#menu 
{
    background: #FFD700; 
    border-color:#000000;
    width: 180px;
}

HTML

<div id="menu_wrap">
    <div id="menu">
        <ul id="navbar">
            <li><a href="#"> Home </a></li>
            <li><a href="#"> About </a></li>
            <li><a href="#"> Contact </a></li>
        </ul>
    </div> 
</div>

Answer 1

为了更好地显示所有类型的屏幕（例如，个人电脑，手机，ipad等），您想使用@media screen，请参阅link

由于网站不适合所有屏幕，因此您需要设置差异。 diff的属性。屏幕。

Answer 2

制作max-height:100%;和min-height:auto;也可以使用宽度。

调整屏幕大小时，使菜单（div）缩小

2 个答案: