창 크기에 따라 모든 항목의 크기를 조정할 수있는 방법이 있습니까?

저는 코딩이 매우 새로워졌습니다. 내가 창을 작게 또는 크게 만들 때마다 객체에 영향을 미치지 않으므로 문제를 해결할 수 있을지 궁금합니다. 또한 왼쪽에 고정 된 것으로 보이지만이를 수정하는 방법을 모르겠습니다. 나는 어떤 도움도 감사하고 어떤 불완전 함 및 sloppyness든지를 위해 유감스럽게 생각한다.창 크기에 따라 모든 항목의 크기를 조정할 수있는 방법이 있습니까?

<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' 쿼리를 사용할 수 있습니다. –

위치가 '고정'으로 설정되어있어 문제가 발생할 수 있습니다.

출처

2014-03-13 01:22:42 Betzyc

이것은 문제와 관련이 없습니다 –

창 크기에 따라 모든 항목의 크기를 조정할 수있는 방법이 있습니까?

답변

관련 문제