难以将网页格式很好地用于不同的显示器尺寸

Question

我无法让我的网站适应不同的显示器屏幕尺寸。我正在做一个有六张图片和字幕的图片库。在我的笔记本电脑上，网页显示效果很好，当我使用相同的浏览器访问更大的显示器时，图像库格式关闭。我将发布一些图片和我的代码来显示正在发生的事情。

大型显示器上的网站会发生什么，未格式化的大小调整：

＆＃13;

＆＃13;

/* controls background of the gallery */
.black {
	position: relative;
	width: 100%;
	height: 1150px;
	background-color: black;
	margin: auto;
	padding: 10px; 
	border: 1px solid black;

}


/* text for title of the gallery */
.galleryTitle{
	
	text-align: center;
	position: relative;
	color: white;
	font-size: 50px;
	font-weight: bold;
	
}


/* inserts image below title */
.five img {
	
	position: relative;
	width: 400px;
	height: 150px;
	left: 650px;	
	bottom: 60px;
}


/* code for gallery*/

/* makes border and box around images*/
div.gallery {
    margin-left: 110px;
    border: 2px solid #ccc;
    float: left;
    width: 15px;
    height: 5px;	
	position: relative;
}

/* controls the image width and heights */

div.gallery img {
    width: 100%;
    height: 250px;
}

/* controls the caption formatting */ 

div.desc {
    padding: 5%;
    text-align: center;
	color: red;
	font-size: 25px;
}

h1, h2 {
  display: inline;
  background: #fff;

}

/* format screen size for different devices */

@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
   div.gallery {
      width: 100%;
      padding-bottom: 100%;
   }
}

@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
   div.gallery {
      width: 50%;
      padding-bottom: 50%;
   }
}
@media only screen and (max-width : 1050px) and (min-width : 651px) {
   /* Small desktop / ipad view: 3 tiles */
   div.gallery {
      width: 33.3%;
      padding-bottom: 33.3%;
   }
}
@media only screen and (max-width : 2560px) and (min-width : 1051px) {
   /* Medium desktop: 4 tiles */
   div.gallery {
      width: 25%;
      padding-bottom: 25%;
   }
}

＆＃13;

<div class = "black">

<p class = "galleryTitle">Galleries</p><br>

<div class = "five">
	<img src = "pinklines.png">
</div>

<!-->start of gallery </!-->

<div class="gallery">

  <a target="_blank" href="gallery1.html">
    <img src="imagesGalery1/33.jpg" alt="Fjords" width="300" height="100">
  </a>
  <div class="desc">CyberGirlz colorcoded Fall 2015 </div>
</div>

<div class="gallery">
  <a target="_blank" href="gallery2.html">
    <img src="imagesGalery1/1.jpg" alt="Forest" width="300" height="100">
  </a>
  <div class="desc">CyberGirlz colorcoded Spring 2016 </div>
</div>

<div class="gallery">
  <a target="_blank" href="gallery3.html">
    <img src="imagesGalery1/8.jpg" alt="Northern Lights" width="300" height="100">
  </a>
  <div class="desc">Wright Bendyworks visits UWW May 2017 </div>
</div>

<div class="gallery">
  <a target="_blank" href="gallery4.html">
    <img src="imagesGalery1/26.jpg" alt="Mountains" width="300" height="100">
  </a>
  <div class="desc">Visiting Wright Bendyworks April 2017 </div>
</div>

<div class="gallery">
  <a target="_blank" href="gallery5.html">
    <img src="imagesGalery1/27.jpg" alt="Northern Lights" width="300" height="100">
  </a>
  <div class="desc">Teen Tech Thursdays Fall 2017 </div>
</div>

<div class="gallery">
  <a target="_blank" href="gallery6.html">
    <img src="imagesGalery1/31.jpg" alt="Mountains" width="300" height="100">
  </a>
  <div class="desc">Web Design Young Athletes March 2017 </div>
  
</div>
</div>

＆＃13;

＆＃13;

＆＃13;