Я собираюсь сделать персональный сайт/блог для себя, но когда я изменяю размер окна браузера, вся страница становится странной.
Итак, как я могу изменить весь сайт вместе с окном браузера?
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> |
<a href="blog.html" class="länk">Blogg</a> |
<a href="musik.html" class="länk">Musik</a> |
<a href="video.html" class="länk">Video</a> |
<a href="spel.html" class="länk">Spel</a> |
<a href="link.html" class="länk">Länkar</a> | <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>
<img src="button/giraff/giraff.jpg" width="64" height="64">
<a href="user/liamrabe.html" class="länk_sida"> Profil</a><br>
<img src="button/dropdown/facebook-icon.png" width="64" height="64">
<a href="http://www.facebook.com/LiamRab3" class="länk_sida"> Facebook</a><br>
<img src="button/dropdown/twitter-icon.png" width="64" height="64">
<a href="http://www.twitter.com/Liam_Rab3" class="länk_sida"> Twitter</a><br>
<img src="button/dropdown/tumblr-icon.png" width="64" height="64">
<a href="http://www.thenotallowedguy.tk" class="länk_sida"> Tumblr</a><br>
<img src="button/dropdown/youtube-icon.png" width="64" height="64">
<a href="http://www.youtube.com/howmuchtimedr" class="länk_sida"> Youtube</a><br>
<img src="button/dropdown/formspring-icon.png" width="64" height="64">
<a href="http://new.spring.me/#!/user/LiamRab3" class="länk_sida"> Formspring</a><br><br>
<img src="button/like_.png" width="64" height="64">
<a href="#" class="länk_sida"> Liam Rabe</a><br><br>
</div>
вы можете использовать Media Queries или Javascript/jquery
для css-медиа-запросов делать somenthing как:
@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 в этом случае, сделайте следующее:
$(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
Я боюсь, что вы приближаетесь к своему css неправильно для правильно реагирующего дизайна. Использование таких вещей, как margin-left: 1300px
сделает почти невозможным адаптацию вашего макета к окну браузера.
Есть некоторые большие статьи здесь, что вы могли бы наслаждаться, которые помогут вам получить более полное понимание.