当我改变浏览器大小时，如何防止我的div调整大小

Question

我拥有www.nexuszeal.com，但我被困在这个网站上。当我改变浏览器尺寸时，我希望div保持不变。

CSS和HTML

＆＃13;

＆＃13;

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%;
    }



  }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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;

}