Как я могу изменить размер моей веб-страницы в окне браузера?

0

Я собираюсь сделать персональный сайт/блог для себя, но когда я изменяю размер окна браузера, вся страница становится странной.

Итак, как я могу изменить весь сайт вместе с окном браузера?

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>

  • 0
    используйте единицы в% или попробуйте использовать медиа-запросы
  • 0
    Если медиа-запросы у вас не работают, я сомневаюсь, что имена классов, содержащие символы вне диапазона [_A-Za-z0-9], также не будут работать.
Показать ещё 1 комментарий

2 ответа

0

вы можете использовать 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

  • 0
    Запросы СМИ CSS не работали :(
  • 0
    @ Liam_Rab3 невозможно: О, нет, извините, что вы можете использовать браузер, который не поддерживает медиа-запросы, проверьте caniuse.com для получения дополнительной информации о поддержке
0

Я боюсь, что вы приближаетесь к своему css неправильно для правильно реагирующего дизайна. Использование таких вещей, как margin-left: 1300px сделает почти невозможным адаптацию вашего макета к окну браузера.

Есть некоторые большие статьи здесь, что вы могли бы наслаждаться, которые помогут вам получить более полное понимание.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню