图片库 - 移动设备优化答案

【问题标题】：Image Gallery - mobile devices optimazation图片库 - 移动设备优化
【发布时间】：2020-01-08 03:44:08
【问题描述】：

所以我是 HTML、CSS、Bootstrap 和 JavaScript 的新手，我制作了这个图库，它看起来很棒，但我需要针对移动设备和较小的屏幕进行修复。我应该改变什么？

那些 #myImg4,5,12,13 是垂直图像，由于设计不同而放置在不同的位置

and this is how it looks on smaller screen

顺便说一句：我知道，那个代码很糟糕，但我是在 4 天前开始编写代码的：/

我非常感谢每一次回复！！！！画廊的 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%;
  }





}

【问题讨论】：

你能用html发布一个可行的例子吗？

标签： javascript html css bootstrap-4

【解决方案1】：

我建议使用 bootstrap (https://getbootstrap.com/)，你可以在 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>

它在移动设备上也应该看起来不错。

【讨论】：

我会试试的，我觉得这很合乎逻辑。谢谢你的回复:)

【解决方案2】：

这里的罪魁祸首是位置“过于精确”。 绝对定位项目不知道它们的物理环境。他们不知道什么时候应该占用更少的空间或换一个新行。

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

基于浮动的布局：https://www.w3schools.com/css/css_float.asp
基于网格的布局：https://css-tricks.com/snippets/css/complete-guide-grid/
基于 Flex 的布局：https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp

按此顺序开始。

享受这个过程！

【讨论】：