當我更改瀏覽器大小時，如何保持我的div不會調整大小

Question

我自己擁有www.nexuszeal.com但是我很難過這個網站。當我改變瀏覽器大小時，我希望div保持不變。

CSS和HTML

html { 
 
    font-size: 16px; 
 
} 
 

 
body { 
 
    background-color: #feffe2; 
 
    margin:0; 
 
    padding:0; 
 
    clear: both; 
 
    min-width: 750px; 
 
    width: 100%; 
 
} 
 

 
#wrapper { 
 
    margin-left:auto; 
 
    margin-right:auto; 
 
    width: 100%; 
 

 
} 
 

 
.header { 
 
    height: 50%; 
 
    width: 100%; 
 
    background-image: url("photo/header.jpg"); 
 
    position: absolute; 
 
    top: 0; 
 
    display: block; 
 
    clear: both; 
 

 
} 
 

 
.list { 
 
    bottom: 10; 
 

 
} 
 

 
.icon-1 { 
 
    background-image: url("photo/icon1-symbol.png"); 
 
    clear: both; 
 
    width: 250px; 
 
    height: 250px; 
 
    position: fixed; 
 
    top: 85%; 
 

 
} 
 

 
.icon-2 { 
 
    background-image: url("photo/support.png"); 
 
    clear: both; 
 
    width: 240px; 
 
    height: 240px; 
 
    position: fixed; 
 
    bottom: 15%; 
 

 
} 
 

 
.icon-3 { 
 
    background-image: url("photo/chef.png") ; 
 
    clear: both; 
 
    width: 250px; 
 
    height: 250px; 
 
    position: fixed; 
 
    bottom: 15%; 
 

 
} 
 

 
.icon-1 { 
 
    margin-left: 10%; 
 

 
} 
 

 
.icon-2 { 
 
    margin-left: 40%; 
 

 
} 
 

 
.icon-3 { 
 
    margin-left: 70%; 
 

 
} 
 
.name { 
 
    text-align: center; 
 
    margin-top: 5px; 
 
    font-size: 46px; 
 
    font-family: cap; 
 
    color: white; 
 

 
} 
 

 
.circle-frame { 
 
    border-radius: 50%; 
 
    width: 200px; 
 
    height: 200px; 
 

 
    margin: 50px auto 10px auto; 
 
    background-image: url("photo/pic-me.jpg"); 
 
    background-color: grey; 
 

 
} 
 

 
.text-1 p { 
 
    float: left; 
 
    position: absolute; 
 
    bottom: 0; 
 
    margin-left: 10%; 
 
    font-size: 35px; 
 
    font-family: cantarell; 
 

 
} 
 

 
.text-2 p { 
 
    float: left; 
 
    position: absolute; 
 
    bottom: 0; 
 
    margin-left: 40%; 
 
    font-size: 35px; 
 
    font-family: cantarell; 
 

 
} 
 

 
.text-3 p { 
 
    float: left; 
 
    position: absolute; 
 
    bottom: 0; 
 
    margin-left: 76%; 
 
    font-size: 35px; 
 
    font-family: cantarell; 
 

 
} 
 

 

 
@font-face { 
 
    font-family: cantarell; 
 
    src: url(Fonts/Cantarell-Regular.ttf); 
 
} 
 

 
@font-face { 
 
    font-family: myFirstFont; 
 
    src: url(Fonts/UglyQua-Italic.ttf); 
 
} 
 

 
@font-face { 
 
    font-family: twreg; 
 
    src: url(Fonts/TradeWinds-Regular.ttf); 
 
} 
 

 
@font-face { 
 
    font-family: cap; 
 
    src: url(Fonts/Capsuula.ttf); 
 
} 
 

 

 
/* media query's */ 
 

 

 

 
/* iPads (portrait and landscape) ----------- */ 
 

 
@media only screen 
 
    and (min-device-width: 768px) 
 
    and (max-device-width: 1024px) 
 
    and (orientation : portrait) { 
 

 
    .header { 
 
     height: 35%; 
 
     background-image: url("photo/header-mobile.jpg"); 
 

 
    } 
 

 
    .text-1 p { 
 
     margin-left: 30%; 
 
     top: 42%; 
 
     font-size: 50px; 
 
     font-family: cantarell; 
 

 
    } 
 

 
    .text-2 p { 
 
     margin-left: 30%; 
 
     top: 67%; 
 
     font-size: 50px; 
 
     font-family: cantarell; 
 

 
    } 
 

 

 

 
    .text-3 p { 
 
     margin-left: 30%; 
 
     top: 93.5%; 
 
     font-size: 50px; 
 
     font-family: cantarell; 
 

 

 
    } 
 

 
    .icon-1 { 
 
     background-image: url("photo/icon1-symbol.png"); 
 
     clear: both; 
 
     width: 250px; 
 
     height: 250px; 
 
     position: absolute; 
 
     bottom: 40%; 
 
     margin-left: 0; 
 
     text-align: right; 
 
     font-size: 40px; 
 
    } 
 

 
    .icon-2 { 
 
     margin-left: 0; 
 

 
    } 
 

 
    .icon-3 { 
 
     margin-left: 0; 
 
     top: 90%; 
 
     padding-bottom:20%; 
 
     background-repeat: no-repeat; 
 

 
    } 
 

 
    p { 
 

 

 
    } 
 

 
    .1 { 
 
     clear: both; 
 
    } 
 

 

 

 
    } 
 

 
@media only screen 
 
    and (min-device-width: 768px) 
 
    and (max-device-width: 1024px) 
 
    and (orientation : landscape) { 
 

 
    .header { 
 
     height: 50%; 
 
     background-image: url("photo/header-mobile.jpg"); 
 

 
    } 
 

 
    .icon-1 { 
 
     background-image: url("photo/icon1-symbol.png"); 
 
     clear: both; 
 
     width: 250px; 
 
     height: 250px; 
 
     position: absolute; 
 
     bottom: 10%; 
 
    } 
 

 

 

 
    }

<div id="wrapper"> 
 

 
    <div class="header"> 
 

 
    <div class="circle-frame"></div> 
 

 
    <div class="name"><b> Lucas Osborn </b></div> 
 

 
    </div> 
 

 

 

 
    <div class="icon-1"></div><div class="text-1"> <p> Web Designer </p> </div> 
 
    <div class="icon-2"></div><div class="text-2"> <p> Tech Support </p> </div> 
 
    <div class="icon-3"></div><div class="text-3"> <p> Good Cook </p> </div> 
 

 
</div>

See the demo here

有圖片，但他們不是在的jsfiddle。 我試過所有其他的事情說，但我不能讓它工作

Answer 1

如果你想要固定的元素，你不應該在你的CSS中使用百分比。百分比用於響應式設計。使用像素css，例如：

.header { 
    height: 30px; 
    width: 960px; 
    background-image: url("photo/header.jpg"); 
    position: absolute; 
    top: 0; 
    display: block; 
    clear: both; 

}