Javascript 图像库-移动设备优化

所以我对HTML、CSS、Bootstrap和JavaScript都是新手。我制作了这个图库，它看起来很棒，但我需要为移动设备和更小的屏幕修复它。我该换什么

这些#myImg4,5,12,13是因为设计不同而放置在不同位置的垂直图像

电脑预览：

顺便说一句：我知道，那个代码非常糟糕，但我4天前开始编写代码，所以：/

我非常感谢每一个回复！！！！ gallery的CSS代码为：

.gallerycontent {
  margin: 10px 200px 40px 100px;
}

.galleryhr {
  border-top: 2px solid #FF0000;
  width: 100;
}
.galleryhr h1 {
  color: #000;
  text-align: center;

}

/* Style the Image Used to Trigger the Modal */
#myImg , #myImg2 , #myImg3 , #myImg6 , #myImg7 , #myImg8 , #myImg9 , #myImg10 , #myImg11 , #myImg14 , #myImg15 , #myImg16 {
  margin-left: 20px;
  max-height: 200px;
  height: 100%;
  margin-bottom: 10px;
  cursor: pointer;
  transition: 0.3s;

}

#myImg4 {
  max-height: 414px;
  height: 100%;
  position: absolute;
  top: 165px;
  right: 186px;
  cursor: pointer;
  transition: 0.3s;
}
#myImg5 {
  max-height: 414px;
  height: 100%;
  position: absolute;
  top: 165px;
  right: 511px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg12 {
  max-height: 414px;
  height: 100%;
  position: absolute;
  top: 590px;
  right: 511px;
  cursor: pointer;
  transition: 0.3s;
}
#myImg13 {
  max-height: 414px;
  height: 100%;
  position: absolute;
  top: 590px;
  right: 186px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}
#myImg2:hover {opacity: 0.7;}
#myImg3:hover {opacity: 0.7;}
#myImg4:hover {opacity: 0.7;}
#myImg5:hover {opacity: 0.7;}
#myImg6:hover {opacity: 0.7;}
#myImg7:hover {opacity: 0.7;}
#myImg8:hover {opacity: 0.7;}
#myImg9:hover {opacity: 0.7;}
#myImg10:hover {opacity: 0.7;}


/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
  margin: auto;
  display: block;
  width: 50%;
  max-width: 1000px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }





}

---

罪魁祸首是位置“太精确”。 绝对定位项目不知道其物理环境。他们不知道什么时候该少占一点空间或者换一排

是时候来看看响应性网页设计了。 有几种方法可以让你接近它

• 基于浮动的布局：
• 基于网格的布局：
• 基于Flex的布局：

按这个顺序开始

---

享受这个过程

我建议使用bootstrap（），您可以在bootstrap v3中执行以下操作：

<div class='row'>
  <div class='col-lg-12'>
     <div class='col-lg-8'>
      <img class='img-responsive col-lg-4' src='image/path'/>
      <img class='img-responsive col-lg-4' src='image/path'/>
      <img class='img-responsive col-lg-4' src='image/path'/>
     </div>
     <div class='col-lg-4'>
      <img class='img-responsive col-lg-6' src='image/path'/>
      <img class='img-responsive col-lg-6' src='image/path'/>
     </div>
  </div>
</div>

---

而且在手机上也应该很好看。

你能用html发布一个可行的例子吗？我会试试，我觉得这很合理。感谢您的回复：）