移动网站导航和徽标 div 重叠答案

【问题标题】：Mobile website Navigation & Logo divs overlapping移动网站导航和徽标 div 重叠
【发布时间】：2016-06-30 01:07:28
【问题描述】：

所以我试图让这个网站对移动设备友好：coveartschildcare.com 和所有标题 div 都重叠，我尝试过的任何方法似乎都不起作用。这是我正在使用的 CSS：

@media only screen

和（最小设备宽度：320px）和（最大设备宽度：568px）和 (-webkit-min-device-pixel-ratio: 2) {

div#logo
    {
        float: left;
    }

div#logo h1
    {
        font-size: 0.5em;
        color: #777;
    }

div#logo span
    {
        font-size: 1.4em;
        color: #FFF;
    }

div#header
    {

        background: url(../images/mobile-bg.jpg) no-repeat bottom center;
        text-align: center;
        float: left;
    }


div#nav 
    {
        z-index : 1;
        float: left;
        position: relative !important;
    }

.container
    {
        float: left;
    }

    .clear {
        clear: both;
    }

}

我尝试过设置相对位置、绝对位置、向左浮动或无位置、自动宽度和高度，但没有任何效果。任何帮助将不胜感激。

【问题讨论】：

标签： html css mobile overlapping

【解决方案1】：

好的，你要问的是让页面上的 div 标签更小，这样它们就不会重叠？

为此创建一个类似这样的新规则：

@media (max-width: 520px) {
    div {
        width: 50px;
    }
    body {
        color: blue;
    }
}

最大宽度是浏览器将激活它的最大宽度。您可以创建两个@media 规则并将第二个@media 规则的最大宽度更改为等于不同的数字。如果宽度小于最大宽度，浏览器将激活该规则。当屏幕尺寸小于两个@media 规则时，它将运行较小的一个

希望这会有所帮助...

【讨论】：

【解决方案2】：

我认为，如果你删除位置：absolute;在 #nav-wrapper{} 上不再重叠。

【讨论】：