Question

我正在开发此网站http://digitalgenesis.com.au/projects/sister/music.html

当我重新调整大小屏幕时会发生什么，它最终会与持有页面标题的div内容发生碰撞，然后向下跳到一个错误的位置

http://digitalgenesis.com.au/projects/sister/img/screen.png

我想做的是在它点击页面上的文字之前停止它

任何人都可以提供有关如何执行此操作的建议

这是html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
       <title></title>
</head>

<body>
<div id="wrap">


<div id="musicbox">
<div id="musicheader">Music</div>

<div id="musicline"></div>
<div id="musiccontent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan nunc vel odio faucibus euismod. Nulla semper lorem vel risus volutpat congue. Sed eleifend velit eget mauris luctus in imperdiet eros ultricies. Ut et gravida ligula. Vestibulum placerat placerat bibendum. Vestibulum pretium mollis arcu, et pharetra est sagittis sed. Vestibulum facilisis elementum urna vel fermentum. Vestibulum id metus at magna tristique ornare in id lorem. Nulla rhoncus, neque ac scelerisque varius, felis enim convallis ipsum, sed auctor libero dolor in ligula. Vivamus rhoncus, sapien non feugiat tempus, tortor enim euismod dolor, ac placerat ante enim sed diam. </div>
</div>


</div>

<div id="musicimg"><img src="img/katrina.jpg" alt="#" /></div>



</body>
</html>

而css是

@font-face {
    font-family: 'CodeLightRegular';
    src: url('../fonts/code/code_light_copy-webfont.eot');
    src: url('../fonts/code/code_light_copy-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/code/code_light_copy-webfont.woff') format('woff'),
         url('../fonts/code/code_light_copy-webfont.ttf') format('truetype'),
         url('../fonts/code/code_light_copy-webfont.svg#CodeLightRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}


#wrap{width:960px; margin:0 auto;}



#musicheader{font-size:120px; font-family: 'CodeLightRegular'; }
#musicbox{float:left; width:519px; }
#musicline{height:4px; background:black;  }
#musicimg{float:right; width:441px; }
#musiccontent{width:120%;}

#clear{clear:both;}

Answer 1

HTML5解决方案是使用媒体查询根据宽度对页面进行不同的样式设计：

<link rel="stylesheet" type="text/css" media="screen" href="css/base.css" />

<link rel="stylesheet" type="text/css" media="screen and (min-width: 960px)" href="css/main.css" />

在你的base.css中，你将拥有所有常见的造型以及适用于较小屏幕的任何造型。在main.css中，您可以覆盖更大的屏幕。

（换句话说，你需要先用小屏幕设计你的css，然后添加css，使它在大屏幕上看起来不错。）

<强>更新： -

例如尝试：

@media screen
{
  body{
      background-size: 0;
  }
}
@media screen and (min-width: 645px)
{
  body{
      background-size: 20%;
  }
}
@media screen and (min-width: 960px)
{
  body{
      background-size: auto;
  }
}

Answer 2

正如丹所说，你可以将background image用作background-position; top:0; right:0; no-repeat＆amp;表示您希望文本与图像不重叠，您可以提供min-width

如何在调整窗口大小时防止图像移动

2 个答案: