有沒有辦法根據窗口大小調整所有項目的大小？

我對編碼非常陌生。每當我讓窗口變小或變大時，它都不會影響對象，所以我想知道我是否可以解決這個問題。它也似乎錨定在左側，但我不知道如何解決這個問題。我感謝任何幫助，併爲任何不連貫和sl sorry而感到遺憾。有沒有辦法根據窗口大小調整所有項目的大小？

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title>Arthur Raps</title> 
<link rel="stylesheet" type="text/css" href="styles.css" media="screen"> 
<link rel="stylesheet" type="text/css" href="normalize.css" media="screen"> 
<link rel="stylesheet" type="text/css" href="grid.css" media="screen"> 
<link href='http://fonts.googleapis.com/css?family=Bubbler+One' rel='stylesheet' type='text/css'> 
<base target="_blank"> 
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"> 
<link rel="icon" href="images/favicon.ico" type="image/x-icon"> 

</head> 


<body> 
<div class="container clearfix"> 
    <h1>Arthur Raps</h1> 
    <ul class="nav"> 
    <li><a href="http://broflu.bandcamp.com/" class="bbtn">Bandcamp</a></li> 
    <li><a href="https://soundcloud.com/broflu" class="sbtn">SoundCloud</a></li> 
    <li><a href="https://www.facebook.com/arthur.banach.3" class="fbtn">Facebook</a></li> 
    <li><a href="https://twitter.com/" class="tbtn">Twitter</a></li> 
    <img src="backgro.png" alt="" class="bone"> 
    <img src="backgro1.png" alt="" class="btwo"> 
    <img src="backgro2.png" alt="" class="bthree"> 
    <img src="backgro3.png" alt="" class="bfour"> 
    </ul> 
</div> 

title { 
    font-family: 'Bubbler One', sans-serif; 
    font-size: 2em; 
    position: absolute; 
    left: 500px; 
    top: 300px; 
} 

body { 
    font-family: 'Bubbler One', sans-serif; 
    font-size: 1.5em; 
    color: #FFFFFF; 
    background: url(images/backgroundone.png) repeat; 

} 
a { 
    text-decoration: none; 
    color: #FFFFFF; 
    background: url('NotCoffee/backgro1.png') no-repeat; 

} 
h1 { 
    font-family: 'Bubbler One', sans-serif; 
    font-size: 2em; 
    color: #142933; 
    position: fixed; 
    left: 525px; 
    top: 200px; 
} 
ul.nav li { 
    list-style: none; 
} 
.tbtn{ 

    padding: 15px 30px; 
    border-radius: 25px; 
    text-transform: uppercase; 
    position: fixed; 
    left: 270px; 
    top: 360px; 
    z-index: 1; 
} 


.bone { 
    position: fixed; 
    left: 220px; 
    top: 325px; 
    z-index: 0; 
} 

.fbtn { 
    padding: 15px 30px; 
    border-radius: 25px; 
    text-transform: uppercase; 
    position: fixed; 
    left: 450px; 
    top: 360px; 
    z-index: 1; 
} 

.btwo { 
    position: fixed; 
    left: 410px; 
    top: 325px; 
    z-index: 0; 
} 

.bbtn { 
    padding: 15px 30px; 
    border-radius: 25px; 
    text-transform: uppercase; 
    position: fixed; 
    left: 640px; 
    top: 360px; 
    z-index: 1; 
} 

.bthree { 
    position: fixed; 
    left: 600px; 
    top: 325px; 
    z-index: 0; 
} 

.sbtn { 
    padding: 15px 30px; 
    border-radius: 25px; 
    text-transform: uppercase; 
    position: fixed; 
    left: 830px; 
    top: 360px; 
    z-index: 1; 
} 

.bfour { 
     position: fixed; 
    left: 795px; 
    top: 325px; 
    z-index: 0; 
}

來源

2014-03-13 user3413213

你應該用％代替px爲你左/右/上/下/寬/高值 – arieljuod

非常感謝。 – user3413213

@ user3413213如果你想以塊的形式使用'@ media'查詢，你可以使用'@ media'查詢 –

您的一些職位設置爲「固定」，這也可能導致問題。

來源

2014-03-13 01:22:42 Betzyc

這與問題無關 –

有沒有辦法根據窗口大小調整所有項目的大小？

回答

相關問題