Question

我即将为自己制作一个个人网站/博客当我调整浏览器窗口大小时，整个页面变得怪异。

那么如何使整个网站随浏览器窗口一起更改？

CSS

.länk {
font-family:rockwell;
font-size:300%;
text-decoration:none;
color:black;
}
.margin10px {
margin-top:-10px;
}
.section1 {
margin: auto;
padding: 10px;
max-width:500px;
}
#one {
width: 780px;
float: left;
border-radius:100px;
}
#two {
margin-left: 1300px;
background: #1B6AA5;
border-radius:50px;
}
.länk_sida {
font-family:rockwell;
font-size:150%;
text-decoration:none; 
color:white;
margin-left:-7px;
}
.text {
font-family:rockwell;
font-size:150%;
text-decoration:none;
color:black;
}
body {
background-color:white;
width:auto;
}

HTML

<img src="button/logga.png"><br>
<div class="margin10px">
<a href="index.html" class="länk">Hem</a> &nbsp;|&nbsp;
<a href="blog.html" class="länk">Blogg</a> &nbsp;|&nbsp;
<a href="musik.html" class="länk">Musik</a> &nbsp;|&nbsp;
<a href="video.html" class="länk">Video</a> &nbsp;|&nbsp;
<a href="spel.html" class="länk">Spel</a> &nbsp;|&nbsp;
<a href="link.html" class="länk">Länkar</a> &nbsp;|&nbsp;<br><br>
</div>

<section class="section1">
<div id="one"><br>
<audio controls></audio><br>
<audio controls></audio><br>
<audio controls></audio><br>
<audio controls></audio><br>
<audio controls></audio><br>
</div>
<div id="two" align="left">
<br>
<div class="text" align="center">Social:</div><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img src="button/giraff/giraff.jpg" width="64" height="64">
<a href="user/liamrabe.html" class="länk_sida">&nbsp;&nbsp;Profil</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img src="button/dropdown/facebook-icon.png" width="64" height="64">
<a href="http://www.facebook.com/LiamRab3"          class="länk_sida">&nbsp;&nbsp;Facebook</a><br>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img src="button/dropdown/twitter-icon.png" width="64" height="64">
<a href="http://www.twitter.com/Liam_Rab3" class="länk_sida">&nbsp;&nbsp;Twitter</a><br>    
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img src="button/dropdown/tumblr-icon.png" width="64" height="64">
<a href="http://www.thenotallowedguy.tk" class="länk_sida">&nbsp;&nbsp;Tumblr</a><br>   
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img src="button/dropdown/youtube-icon.png" width="64" height="64">
<a href="http://www.youtube.com/howmuchtimedr" class="länk_sida">&nbsp;&nbsp;Youtube</a><br>    
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img src="button/dropdown/formspring-icon.png" width="64" height="64">
<a href="http://new.spring.me/#!/user/LiamRab3" class="länk_sida">&nbsp;&nbsp;Formspring</a><br><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img src="button/like_.png" width="64" height="64"> 
<a href="#" class="länk_sida">&nbsp;&nbsp;Liam Rabe</a><br><br>
</div>

Answer 1

您可以使用媒体查询或Javascript / jquery

对于css媒体查询，请执行以下操作：

@media (min-width: 0px) and (max-width: 800px){ //you are specifying you want classes inside this rule to change when window is > 0px but < 800px
a{
  color:red;
}
}

如果你想在这种情况下使用jQuery做这样的somenthing：

   $(function(){
   $(window).resize(function(){
    var window_width = $(window).width();
    if( window_width < 800 ){ //if window width < 800px do something you want
     alert('Hey the window is '+window_width+'px wide, that is soooo coool');
   }
});
});

Media Queries支持浏览器和设备查看 http://caniuse.com/#search=media%20queries

Answer 2

我担心你的css错误接近正确的响应式设计。使用像margin-left: 1300px这样的东西会使你的布局几乎不可能适应浏览器窗口。

您可能会喜欢的一些精彩文章here可以帮助您更全面地了解。

如何使用浏览器窗口调整网页大小

2 个答案: