有没有办法根据窗口大小调整所有项目的大小？

我对编码非常陌生。每当我让窗口变小或变大时，它都不会影响对象，所以我想知道我是否可以解决这个问题。它也似乎锚定在左侧，但我不知道如何解决这个问题。我感谢任何帮助，并为任何不连贯和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

这与问题无关 –

有没有办法根据窗口大小调整所有项目的大小？

回答

相关问题