-1
我自己擁有www.nexuszeal.com但是我很難過這個網站。當我改變瀏覽器大小時，我希望div保持不變。當我更改瀏覽器大小時，如何保持我的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>有圖片，但他們不是在的jsfiddle。 我試過所有其他的事情說，但我不能讓它工作
請詳細說明一下，很難理解問題到底是什麼或者到底是什麼東西。 – Athafoud 2014-12-04 18:45:19
您需要在問題中發佈相關代碼而不是鏈接到代碼。此外，很明顯，你沒有做任何研究，因爲將元素固定到特定的大小非常簡單。 – 2014-12-04 18:49:52