我的 CSS 有什么问题，将窗口大小调整为较小的尺寸时元素会移动和重叠？

好的，下面是我的CSS和HTML代码。我一直在为div 使用百分比，以便这些div 可以重新调整到更大的屏幕尺寸。烦人的是，当我在计算机上将窗口大小调整为较小的尺寸时，这些元素会不断移动，直到它们重叠，我不希望这样。我如何使用百分比使这些div重新调整为更大的分辨率，但在根据下面的CSS和HTML将窗口大小调整为较小的尺寸时不会移动

这是 CSS

body{
    background:#F4F4F4;
    background-size:100%;
    width:100%;
    height:100%;
    margin:0 auto;
            min-width:1300px;
            min-height:750px;
}
.logo{
    position:absolute;
    left:40%;
    top:5%;
}
    .logo_homepage{
    position:absolute;
    left:4%;
    top:5%;
}
   .homepage_slogan{
    position:absolute;
    left:3%;
    top:45%;
}
    .search_box{
    position:absolute;
    left:30%;
    top:30%;
            width:35%;
            height:50%;
            min-width:35%;
            min-height:50%;
}

    .user_info{
    position:absolute;
    left:75%;
            height:100%;
            width:20%;
            min-width:20%;
            background:white;
}
.header{
    position:absolute;
    top:0px;
    width:100%;
            min-width:98%;
    height:100px;
            min-height:100px;
    left:0;
    background:#EB6A4A; 
}
.slogan{
    position:absolute;
    top:60%;
    left:40.5%;
}
.login{
    position:absolute;
    top:15%;
    left:90%;
}
    .whitebackground{
    background:#FFFFFF;
}
#slides{
    position:absolute;
    top:20%;
    width:50%;
    background:transparent;
    height:20%;
    left:25%;
}
.socialfeeds{
    position:absolute;
    top:41%;
    width:25%;
    height:52%;
            min-width:25%;
            min-height:52%;
    left:25%;
} 
    .heading{
    position:absolute;
    top:20%;
    width:100%;
            min-width:100%;
    height:10%;
            min-height:10%;
    left:2%;
}
    .bucket{
    position:absolute;
    top:18%;
    left:20%;
            width:13%;
            min-width:13%;
}
     .title{
    position:absolute;
    top:20%;
    left:32%;
            width:30%;
            min-width:30%;
}
    .feed_icons{
      margin:20px;
}
.featured{
    position:absolute;
    top:30%;
    width:30%;
            min-width:30%;
    background:transparent;
    height:60%;
            min-height:60%;
    left:60%;
}

和 HTML

<body class="whitebackground">
    <div class="header">
        <div class="logo"><img draggable="false" src="/images/logo.png" /></div>
        <div class="slogan"><img draggable="false" src="/images/slogan.png" /></div>
        <div class="login"><a href="/twitter/redirect.php"><img draggable="false" src="/images/login.png" /></a></div>
    </div>
    <div class="bucket">
        <span class="feed_icons"><a href="#"><img draggable="false" src="/images/bucket.png"/></a></span>
    </div>
        <div class="title">
        <span class="feed_icons"><a href="#"><img draggable="false" src="/images/title.png"/></a></span>
    </div>
    <div class="socialfeeds">
        <span class="feed_icons"><a href="#"><img draggable="false" src="/images/social_feeds.png" width="100%" height="100%"/></a></span>
    </div>
    <div class="featured"><img draggable="false" src="/images/featured_list.png" width="100%" height="100%" /> </div>
    <div class="footer"> <span style='margin-left:45%;'> COPYRIGHT 2013&copy;</span></div>

</body>

位置：absolute 将元素从 DOM 渲染规则中提取出来。编写的 CSS 告诉浏览器始终将这些元素放置在 X 位置，无论元素或屏幕的大小如何。A List Apart有一篇很好的文章，可以很好地了解假设的工作原理：http://alistapart.com/article/css-positioning-101

删除定位，改用"显示："或"浮动："属性。事情将开始根据 DOM 渲染规则进行流动。

此外，请确保应用的 CSS 类具有功能或语义命名。避免使用引用设计处理的类，因为像颜色/大/小这样的东西可以并且确实会随着时间的推移而变化，即"白色背景"。使用诸如"客户端名称"或.theme之类的东西，然后在该类或BODY标签上声明背景颜色，可以更好地提供代码。

网页标记

<body class="site-body">
    <div class="header">
        <div class="logo"><img draggable="false" src="/images/logo.png" /></div>
        <div class="slogan"><img draggable="false" src="/images/slogan.png" /></div>
        <div class="login"><a href="/twitter/redirect.php"><img draggable="false" src="/images/login.png" /></a></div>
    </div>
    <div class="bucket">
        <span class="feed_icons"><a href="#"><img draggable="false" src="/images/bucket.png"/></a></span>
    </div>
        <div class="title">
        <span class="feed_icons"><a href="#"><img draggable="false" src="/images/title.png"/></a></span>
    </div>
    <div class="socialfeeds">
        <span class="feed_icons"><a href="#"><img draggable="false" src="/images/social_feeds.png" width="100%" height="100%"/></a></span>
    </div>
    <div class="featured"><img draggable="false" src="/images/featured_list.png" width="100%" height="100%" /> </div>
    <div class="footer"> <span style='margin-left:45%;'> COPYRIGHT 2013&copy;</span></div>

</body>

.CSS：

.header {
height: auto; 
overflow: hidden; /* clears floated child elements */ 
width: 100%; 
min-width: 98%;
}
.logo, .slogan, .login {
display: inline-block;
} 
/* or... 
.logo, .slogan, .login {
float: left;
} */
.slogan {
margin-left: 40.5%;
}

最好在这里使用媒体查询。

@media all and (max-width: 60%) and (min-width: 30%) {
  
..........whatever you want to do...................
}

有关媒体查询的更多信息，请访问： css-media-query

相关内容

最新更新

热门标签：