如何获得全面的响应能力？

如何解决如何获得全面的响应能力？

我设计了一个HTML页面，该页面包含四个部分，并且还具有模式弹出功能。我已经做了很多尝试来实现响应能力，但是我不知道如何做到。我以某种方式实现了平板电脑视图，但是再次使窗口标签变大和变大时，它看起来也不正确，而且在模态弹出窗口中内容也不正确。请给我一些想法来实现这一目标。下面是我的代码

var modal1 = document.getElementById("myModal1");

// Get the button that opens the modal1
var btn1 = document.getElementById("btn1");

// Get the <span> element that closes the modal
var span1 = document.getElementsByClassName("close1")[0];

var modal2 = document.getElementById("myModal2");

// Get the button that opens the modal2
var btn2 = document.getElementById("btn2");

// Get the <span> element that closes the modal
var span2 = document.getElementsByClassName("close2")[0];

var modal3 = document.getElementById("myModal3");

// Get the button that opens the modal3
var btn3 = document.getElementById("btn3");

// Get the <span> element that closes the modal3
var span3 = document.getElementsByClassName("close3")[0];

var modal4 = document.getElementById("myModal4");

// Get the button that opens the modal4
var btn4 = document.getElementById("btn4");

// Get the <span> element that closes the modal4
var span4 = document.getElementsByClassName("close4")[0];



// When the user clicks the button,open the modal 
function handlefacebookmodal() {
  if(modal1.style.display != "block"){
    modal1.style.display = "block";
    modal2.style.display = "none";
    modal3.style.display = "none";
    modal4.style.display = "none";
  }else{
    modal1.style.display = "none";
  }
}


// When the user clicks on <span> (x),close the modal
span1.onclick = function() {
  modal1.style.display = "none";
}

// When the user clicks the button,open the modal 
function handleinstamodal() {
  if(modal2.style.display != "block"){
    modal2.style.display = "block";
    modal1.style.display = "none";
    modal3.style.display = "none";
    modal4.style.display = "none";
  }else{
    modal2.style.display = "none";
  }
}

// When the user clicks on <span> (x),close the modal
span2.onclick = function() {
  modal2.style.display = "none";
}

// When the user clicks the button,open the modal 3
function handlewhatsappmodal() {
  if(modal3.style.display != "block"){
    modal3.style.display = "block";
    modal2.style.display = "none";
    modal1.style.display = "none";
    modal4.style.display = "none";
  }else{
    modal3.style.display = "none";
  }
}

// When the user clicks on <span> (x),close the modal3
span3.onclick = function() {
  modal3.style.display = "none";
}

// When the user clicks the button,open the modal 4
function handletwittermodal() {
  if(modal4.style.display != "block"){
    modal4.style.display = "block";
    modal2.style.display = "none";
    modal3.style.display = "none";
    modal1.style.display = "none";
  }else{
    modal4.style.display = "none";
  }
}

// When the user clicks on <span> (x),close the modal4
span4.onclick = function() {
  modal4.style.display = "none";
}

window.addEventListener('click',function(e){
  if(btn1.contains(e.target)){
    handlefacebookmodal();
  }else if(btn2.contains(e.target)){
    handleinstamodal();
  }else if(btn3.contains(e.target)){
    handlewhatsappmodal();
  }else if(btn4.contains(e.target)){
    handletwittermodal();
  }else{
    modal1.style.display = "none";
    modal2.style.display = "none";
    modal3.style.display = "none";
    modal4.style.display = "none";
  }
});

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@500&display=swap');

html,body{
  height: 100%;
  margin: 0;
  padding: 0;
}

button{
  width: 50%;
  height: 50%;
  float: left;
  margin: 0;
  padding: 0;
  cursor: pointer;
  text-align: center;
  position: relative;
}

button span {
  position: absolute;
  width: 100%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-family: 'Ubuntu',sans-serif;
  font-size: 70px;
  color: transparent;
}

button img{
  width: 100%;
  height: 100%;
}

button:hover img{
  opacity: 0.4;
}

button:hover span{
  color: darkblue;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 50%;
  height: 50%;
  border: 0;
}

.modal-content1 {
  position: relative;
  background-color: #fefefe;
  margin: 30% 50%;
  padding: 30px 5px 5px 5px;
  border: 1px solid #888;
  width: 100%;
  height: 68%;
  border-radius: 7px;
}

.modal-content2 {
  position: relative;
  background-color: #fefefe;
  margin: 30% 50%;
  padding: 30px 5px 5px 5px;
  border: 1px solid #888;
  width: 100%;
  height: 68%;
  border-radius: 7px;
}

.modal-content3 {
  position: relative;
  background-color: #fefefe;
  margin: 30% 50%;
  padding: 30px 5px 5px 5px;
  border: 1px solid #888;
  width: 100%;
  height: 75%;
  border-radius: 7px;
}

.modal-content4 {
  position: relative;
  background-color: #fefefe;
  margin: 30% 50%;
  padding: 30px 5px 5px 5px;
  border: 1px solid #888;
  width: 100%;
  height: 64%;
  border-radius: 7px;
}

#close {
  position: absolute;
  float: right;
  width: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  cursor: pointer;
  border-radius: 0.25rem;
  top: 1px;
  right: 1px;
  background-color: lightgray;
}

#close:hover,#close:focus {
  background-color: darkgray;
}

p,img{
  display: flex;
}

img{
  float: left;
  width: 45%;
  padding: 0;
  margin: 0;
}

p{
  float: right;
  text-align: justify;
  width: 50%;
  padding: 0;
  margin: 0;
  font-size: 20px;
}


@media (min-width: 320px) and (max-width: 767px){

}
@media (min-width: 768px) and (max-width: 1023px){
  button span{
    font-size: 30px;
    color: darkblue;
  }

  button img{
    opacity: 0.4;
  }

  .modal{
    transform: translate(-50%,-50%);
    width: 75%;
    height: 75%;
    top: 0;
    border: 0;
  }

  #modal-content{
    margin-left: 65%;

  }

  .modal-content1 {
    margin-top: 36%; 
  }

  .modal-content2 {
    margin-top: 36%; 
  }

  .modal-content3 {
    margin-top: 37%; 
  }

  .modal-content4 {
    margin-top: 37.3%; 
  }

  p{
    font-size: 15px;
    overflow-x: scroll;
  }  

}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Nature</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <button id="btn1"><img src="https://images.unsplash.com/photo-1514361107497-ca601745d27a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt=""><span>Himalaya</span></button>

    <div id="myModal1" class="modal">
      <div id="modal-content" class="modal-content1">
        <span id="close" class="close1">x</span>
        <img src="https://images.unsplash.com/photo-1577516311194-eb14c570a137?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" id="image">
        <p id="content">
          The Himalayas are a mountain range in South Asia The Himalayas are a mountain range in South Asia.The west end is in Pakistan. They run through Jammu and Kashmir,Himachal Pradesh,Uttaranchal,Sikkim and Arunachal Pradesh states in India,Nepal,and Bhutan. The east end is in the south of Tibet. They are divided into 3 parts Himadri,Himachal and Shiwaliks.The 15 highest mountains in the world are in the Himalayas. 
        </p>
      </div>
    </div>

    <button id="btn2"><img src="https://images.unsplash.com/photo-1508831084156-40f6573bbe6b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt=""><span>Waterfall</span></button>

    <div id="myModal2" class="modal">
      <div id="modal-content" class="modal-content2">
        <span id="close" class="close2">x</span>
        <img src="https://images.unsplash.com/photo-1493713838217-28e23b41b798?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" id="image">
        <p id="content">
          Waterfalls are commonly formed in the upper course of a river where lakes fall into in steep mountains. Because of their landscape position,many waterfalls occur over bedrock fed by little contributing area,so they may be ephemeral and flow only during rainstorms or significant snowmelt. The further downstream,the more perennial a waterfall can be. Waterfalls can have a wide range of widths and depths.
        </p>
      </div>
    </div>

    <button id="btn3"><img src="https://images.unsplash.com/photo-1585889574476-af7bcb00d9c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt=""><span>Raigad</span></button>

    <div id="myModal3" class="modal">
      <div id="modal-content" class="modal-content3">
        <span id="close" class="close3">x</span>
        <img src="https://mapio.net/images-p/122383921.jpg" id="image">
        <p id="content">
          Raigad is a hill fort situated in Mahad,Raigad district of Maharashtra,India. The Raigad Fort,formerly known as Rairi,was built by Chandraraoji More,the King of Jawali,who was then seized by Shivaji Maharaj who made it his capital in 1674 when he was crowned the King of the Maratha Kingdom which later developed into the Maratha Empire,eventually covering much of western and central India. The fort rises 820 metres above the sea level and is located in the Sahyadri mountain range.
        </p>
      </div>
    </div>

    <button id="btn4"><img src="https://images.unsplash.com/photo-1543763479-fb7533fcbf3b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt=""><span>Lake</span></button>

    <div id="myModal4" class="modal">
      <div id="modal-content" class="modal-content4">
        <span id="close" class="close4">x</span>
        <img src="https://images.unsplash.com/photo-1531512073830-ba890ca4eba2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1144&q=80" id="image">
        <p id="content">
          A lake is an area filled with water,localized in a basin,surrounded by land,apart from any river or other outlet that serves to feed or drain the lake. Lakes lie on land and are not part of the ocean. Therefore,they are distinct from lagoons,and are also larger and deeper than ponds,though there are no official or scientific definitions. Lakes can be contrasted with rivers or streams,which are usually flowing. Natural lakes are generally found in mountainous areas.
        </p>
      </div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

解决方法

不要使用最大宽度，它的总宽度是不必要的。按照我用于响应的模式（始终优先移动）：

.custom-class{
  height: x
}
@media(min-width:576px){
  height: y
}
@media(min-width:768px){
  height: z
}
@media(min-width:1024px){
  height: u
}
@media(min-width:1280px){
  height: v
}

在您要实现响应性的每个元素上使用此模式。