如何使自动适应所有分辨率和所有屏幕的html页面？

Question

我有一个HTML页面，其中有很多CSS链接到HTML页面，但是我将尺寸设置得太大了，无法适合所有屏幕和所有分辨率。我希望它可以自动调整大小，以便当您以较低或较高的分辨率始终显示整个页面并且不更改鳕鱼的工作方式时。我将css和HTML而不是js放在这里，因为在这种情况下没有必要。如何更改页面（包括页面）中所有内容的大小以自动适应每台PC？

html, body {
    width: 3779.527559055px;
   height: 100%;
   font-family: "Helvetica Neue", Helvetica, sans-serif;
   color: #444;
   -webkit-font-smoothing: antialiased;
   background-image: url("https://images4.alphacoders.com/111/111298.jpg");
   background-position: center;
   background-repeat: no-repeat;
   background-size: 350% 100%;
   font-family: Arial, Helvetica, sans-serif;
}

/************** TOGGLE BUTTON***********************/
.switch {
    position: relative;
    display: inline-block;
    right:0px;
    width: 200px;
    height: 34px;
    padding:20px;
  }
  
.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ca2222;
  -webkit-transition: .30s;
  transition: .30s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 50px;
  width: 50px;
  left: 10px;
  bottom: 10px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2ab934;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(160px);
  -ms-transform: translateX(160px);
  transform: translateX(160px);
}

/*------ ADDED CSS ---------*/
.on
{
  display: none;
}

.on, .off
{
  color: white;
  position: absolute;
  transform: translate(-50%,-50%);
  top: 50%;
  left: 50%;
  font-size: 30px;
  font-family: Verdana, sans-serif;
}

input:checked+ .slider .on
{display: block;}

input:checked + .slider .off
{display: none;}

/*--------- END --------*/

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;}
/*******************************************SHUTDOWN BUTTON********************************/
#BtnTesteLogout{
  background-color: Transparent;
  background-repeat:no-repeat;
  border: none;
  cursor:pointer;
  overflow: hidden;
}

#LOGOUT{
    position: relative;
}

#Logout button img{
  width: 400px;
  height: 400px;
}

/*******************************************Split Screen, WIFI, Bluetooth*********************************/
#SSbutton, #WIFIButton, #BlueButton{
  background-color: Transparent;
  background-repeat:no-repeat;
  border: none;
  cursor:pointer;
  overflow: hidden;
}

#SplitScreen{
  position: absolute;
  top: 10px;
  height: 400px;
  width: 400px;
  right: 1700px;
}

#WIFI{
  position: absolute;
  top: 0px;
  height: 400px;
  width: 400px;
  right: 700px;
}

#Bluetooth{
  position: absolute;
  top: 10px;
  height: 400px;
  width: 400px;
  right: 1200px;
}


#SplitScreen button img, #WIFI button img,#Bluetooth button img{
  width: 400px;
  height: 400px;
  background-color: Transparent;
}

.clockdate-wrapper {
  background-color: none;
  padding:25px;
  max-width:500px;
  width:100%;
  text-align:center;
  border-radius:5px;
  margin:0 auto;
  height:300px;
  position: absolute;
  top:40px;
  right: 100px;
  border-radius: 15%;
}
#clock{
  background-color:none;;
  font-family: sans-serif;
  font-size:100px;
  text-shadow:0px 0px 1px #fff;
  color:#fff;
}
#clock span {
  color:white;
  text-shadow:0px 0px 1px black;
  font-size:50px;
  position:relative;
  top:-27px;
  left:-10px;
}
#date {
  letter-spacing:10px;
  font-size:50px;
  font-family:arial,sans-serif;
  color:#fff;
}

/**************************************************************************WIFI DROPDOWN********************************************************/

/**************************************************************************BLUETTOTH WINDOW****************************************************/
#BlueWindow{
  position: absolute;
  width:1900px;
  height:1500px;
  left:1500px;
  top:550px;
  border-radius:10px black solid;
  z-index: 10000;
}

#BlueWindowheader{
  height: 100px;
    background: rgb(30,87,153); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}

#closeBlue{
    width: 75px;
    height: 75px;
    top:0px;
    left:0px;
    background-color: none; 
    position:absolute;
}

#JoanaPTexto{
  color:black;
  text-align:center;
  text-shadow: 3px 2px grey;
  font-size:50px;
  top: 20px;
  position: relative;
}

#DocImgBlue{
  width: 400px;
  height: 400px;
  background-color: none;
  padding:40px; 
}

#bottomBlue{
  background-color:white;
  height:1415px;
  border-bottom-left-radius:5%;
  border-bottom-right-radius:5%;
}

#MariaDoc{
  position: absolute;
  left:140px;
  top:575px;  
}

#closeButtonBlue{
  width: 75px;
    height: 75px;
    background-color: none;
    padding:5px;  
    top: 45px;
    position: absolute;
    right:10px;
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden; 
}
#doc1{
  z-index:10010;
}
/**************************************************************************BLUETOOTH DROPDOWN**************************************************/
#BlueButton{
  width:300px;
  height:400px;
  top:-28px;
  right:-20px;
  position: relative;
}

#wrapperB {
  color: #ffcccc;
  top: 100px;
  width: 400px;
}

#dispos{
  color:black;
}

a {
  text-decoration: none;
  color: inherit;
}

nav ul ul {
  -webkit-transition: all 500ms ease-in-out 500ms;
  -moz-transition: all 500ms ease-in-out 500ms;
  -ms-transition: all 500ms ease-in-out 500ms;
  -o-transition: all 500ms ease-in-out 500ms;
  transition: all 500ms ease-in-out 500ms;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  -ms-transform: rotateX(-90deg);
  -o-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transform-origin: 0% 0%;
  -moz-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  -o-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-box-shadow: 0px -100px 500px rgba(0,0,0,0);
  box-shadow: 0px -100px 500px rgba(0,0,0,0);
}

nav ul li:hover > ul {
  -webkit-transition: all 500ms ease-in-out 0ms;
  -moz-transition: all 500ms ease-in-out 0ms;
  -ms-transition: all 500ms ease-in-out 0ms;
  -o-transition: all 500ms ease-in-out 0ms;
  transition: all 500ms ease-in-out 0ms;
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
  transform: rotateX(0deg);
  -webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.1);
  box-shadow: 10px 10px 10px rgba(0,0,0,0.1);
}

nav ul {
  padding: 0;
  list-style: none;
  position: relative;
  display: inline-table;
  border-radius: 5px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 200px;
  -ms-perspective: 200px;
  perspective: 200px;
}

nav ul:after {
  content: "";
  clear: both;
  display: block;
}

nav ul li {
  float: left;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 200px;
  -ms-perspective: 200px;
  perspective: 200px;
  border-right: 1px solid #890456;
}

nav ul > li:last-of-type {
  border-right: none;
  border-radius: 0 5px 5px 0;
}

nav ul span li { border-right: 1px solid #890456; }

nav ul li:first-of-type { border-radius: 5px 0 0 5px; }


#mphone:hover>a,#jphone:hover > a { color: #fff; }
#dispos:hover > a {color:none}

nav ul li a {
  display: block;
  padding: 10px 31px 10px 32px;
}

#wrapperB #mainB #subB {
  position: absolute;
  top: 400px;
  padding: 0;
  right: 20px;
  width:1000px;
  height:400px;
  border-radius: 0 0 5px 5px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a7cfdf+0,23538a+100;Blue+3d+%238 */
background: #a7cfdf; /* Old browsers */
background: -moz-linear-gradient(-45deg, #a7cfdf 0%, #23538a 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #a7cfdf 0%,#23538a 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #a7cfdf 0%,#23538a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

#wrapperB #mainB #subB li {
  float: none;
  position: relative;
  border: none;
}

.bottom{
  font-size:75px;
}

nav ul ul li:last-of-type { border-radius: 0 0 5px 5px; }

nav ul ul li a { padding: 8px 21px; }

/**************************************************************************SS DROPDOWN*************************************/
#SSButton{
  width:400px;
  height:400px;
  top:-28px;
  right:-20px;
  position: relative;
}

#wrapperSS {
  color: black;
  top: 100px;
  width: 700px;
}

a {
  text-decoration: none;
  color: inherit;
}

nav ul ul {
  -webkit-transition: all 500ms ease-in-out 500ms;
  -moz-transition: all 500ms ease-in-out 500ms;
  -ms-transition: all 500ms ease-in-out 500ms;
  -o-transition: all 500ms ease-in-out 500ms;
  transition: all 500ms ease-in-out 500ms;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  -ms-transform: rotateX(-90deg);
  -o-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transform-origin: 0% 0%;
  -moz-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  -o-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-box-shadow: 0px -100px 500px rgba(0,0,0,0);
  box-shadow: 0px -100px 500px rgba(0,0,0,0);
}

nav ul li:hover > ul {
  -webkit-transition: all 500ms ease-in-out 0ms;
  -moz-transition: all 500ms ease-in-out 0ms;
  -ms-transition: all 500ms ease-in-out 0ms;
  -o-transition: all 500ms ease-in-out 0ms;
  transition: all 500ms ease-in-out 0ms;
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
  transform: rotateX(0deg);
  -webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.1);
  box-shadow: 10px 10px 10px rgba(0,0,0,0.1);
}

nav ul {
  padding: 0;
  list-style: none;
  position: relative;
  display: inline-table;
  border-radius: 5px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 200px;
  -ms-perspective: 200px;
  perspective: 200px;
}

nav ul:after {
  content: "";
  clear: both;
  display: block;
}

nav ul li {
  float: left;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 200px;
  -ms-perspective: 200px;
  perspective: 200px;
  border-right: 1px solid #890456;
}

nav ul > li:last-of-type {
  border-right: none;
  border-radius: 0 5px 5px 0;
}

nav ul span li { border-right: 1px solid #890456; }

nav ul li:first-of-type { border-radius: 5px 0 0 5px; }


#mergeall:hover>a,#split2:hover > a,#split4:hover > a, #split6:hover > a  { color: green; }

nav ul li a {
  display: block;
  padding: 10px 31px 10px 32px;
}

#wrapperSS #mainSS #subSS {
  position: absolute;
  top: 400px;
  padding: 0;
  right: 20px;
  width:800px;
  height:400px;
  border-radius: 0 0 5px 5px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f6e6b4+0,ed9017+100;Yellow+3D+%231 */
background: #f6e6b4; /* Old browsers */
background: -moz-linear-gradient(-45deg, #f6e6b4 0%, #ed9017 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #f6e6b4 0%,#ed9017 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #f6e6b4 0%,#ed9017 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

#wrapperSS #mainSS #subSS li {
  float: none;
  position: relative;
  border: none;
}

.bottom{
  font-size:75px;
}

nav ul ul li:last-of-type { border-radius: 0 0 5px 5px; }

nav ul ul li a { padding: 8px 21px; }
/********************************************BOTTOM BAR***********************************/
/* Place the navbar at the bottom of the page, and make it stick */
.navbar {
    background-color: none;
    left: 30%;
    position: absolute;
    bottom: 0;
    height: 500px;
    width: 1500px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 10%;
    padding-right: 10%;
    border-top-right-radius: 30px;
    border-top-left-radius: 30px;
    text-align: center;
    overflow: hidden;
  }

  #NetImg, #Home, #contact{
      width: 400px;
      height: 400px;
      padding:20px;
      background: none;
  }

  /************************************************MAIN************************************/
  #net{
    position: absolute;
    width:3505px;
    height:1500px;
    left:1500px;
    top:550px;
    border-radius:10px black solid;
    z-index: 000;
  }

  #janela{
    position: absolute;
    width:1900px;
    height:1500px;
    left:1500px;
    top:550px;
    border-radius:10px black solid;
    z-index: 000;
  }

  #closeDocs, #closeNet{
    width: 75px;
    height: 75px;
    background-color: none;
    padding:5px;  
    top: 35px;
    position: absolute;
    right:20px;
  }

  #docsHeadTexto,#NetTexto{
    color:black;
    text-align:center;
    text-shadow: 3px 2px grey;
    font-size:50px;
    top: 20px;
    position: relative;
  }

  #netBottom{
    background-color:white;
    height:2515px;
    width: 3500px;
    left:-1px;
    top:130px;
    position: absolute;
    border-bottom-left-radius:0%;
    border-bottom-right-radius:0%;
  }
  


  .windowTop,.windowTop2,.windowTop1{
    height: 100px;
    background: rgb(30,87,153); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
  }

  #DocImg{
    width: 400px;
    height: 400px;
    background-color: none;
    padding:40px;
  }

  #bottomWindowDocs{
    background-color:white;
    height:1415px;
    border-bottom-left-radius:5%;
    border-bottom-right-radius:5%;
  }

  #DocEx{
    position: absolute;
    left:140px;
    top:575px;  
  }
  
  /****************************************************** CONTACTOS *************************************/
  /****************************************************** Calendario ************************************/
  #calendar{
    position:absolute;
    height:3000px;
    width:4000px;
    top:300px;
    left:800px;
  }

  #janelaCalendario{
    z-index:0000;
  }

  #iconeCal{
    height:400px;
    width:400px;
  }

  #janelaCalendarioHeader{
    position: absolute;
    top:200px;
    left:800px;
    width:4005px;
  }

  #closeCal{
    position: absolute;
    top:10px;
    left:3900px;
    height: 90px;
    width:90px;
  }

<!DOCTYPE html>
<html>
<head>
<title>Desk+ - Grupo 36</title>
<link rel="stylesheet" type="text/css" href="PF1.1.css">
</head>
<body onload="startTime()">

<div id="Logout">
    <!---<a href="logout.php" id="LogoutAction"><img src="https://cdn2.iconfinder.com/data/icons/crystalproject/crystal_project_256x256/apps/exit.png"></a>-->
    <button onclick="location.href = 'PF1.html';" id="BtnTesteLogout" class="float-left submit-button" ><img src="https://cdn2.iconfinder.com/data/icons/crystalproject/crystal_project_256x256/apps/exit.png"></button>
</div>


<div id="BarraSDireita">
    <div id="Bluetooth">
        <nav id="wrapperB" class="wrapper">
                <ul id="mainB" class="main">
                  <li id="frontB" class="front"><a href="#"><img id ="BlueButton" src="https://cdn.pixabay.com/photo/2015/03/12/12/22/bluetooth-670069_960_720.png"></a>
                    <ul id="subB" class="sub">
                      <li class="bottom" id="onoff"><a> <label class="switch"><input type="checkbox" id="togBtn"><div class="slider round"><!--ADDED HTML --><span class="on">ON</span><span class="off">OFF</span><!--END--></div></label></a></li>
                      <li class="bottom" id="dispos"><a>Dispositivos emparelhados:</a></li>
                      <li class="bottom" id="jphone"><a onclick="abrirBlue()">Joana's Phone</a></li>
                      <li class="bottom" id="mphone"><a>Maria's Phone</a></li>
                    </ul>
                </li>
                </ul>
              </nav>
    </div>

    <div id="clockdate">
            <div class="clockdate-wrapper">
              <div id="clock"></div>
              <div id="date"></div>
            </div>
    </div>

    <div id="SplitScreen">
            <nav id="wrapperSS" class="wrapper">
                    <ul id="mainSS" class="main">
                      <li id="frontSS" class="front"><a href="#"><img id ="SSButton" src="bullet-splitscreen.png"></a>
                        <ul id="subSS" class="sub">
                          <li class="bottom" id="mergeall"><a href="#">Juntar todos os ecr&atildes</a></li>
                          <li class="bottom" id="split2"><a href="#">Dividir em 2</a></li>
                          <li class="bottom" id="split4"><a href="#">Dividir em 4</a></li>
                          <li class="bottom" id="split6"><a href="#">Dividir em 6</a></li>
                        </ul>
                    </li>
                    </ul>
                  </nav>
    </div>

    <div id="WIFI"> 
        <div class="dropdown">
            <button id="WIFIButton"><img src="https://purepng.com/public/uploads/large/purepng.com-wifi-icon-redwifi-iconwifiiconwireless-connection-1701528436213ktjmp.png"></button>
        </div>
    </div>
</div>

<div id="BlueWindow" style="display:none;">
        <div id="BlueWindowheader">
                <header class="windowTop1">
                <button id="closeButtonBlue"><img id="closeBlue" class="X" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-dialog-close-icon.png" alt="X" onclick="fecharBlue()"></button>
                <h1 id="JoanaPTexto">Joana's Phone</h1>
                </header>
        </div>
        <div id="bottomBlue">
            <div id="doc1">
                <div id="doc1header">
                    <img id="DocImgBlue" src="https://img.icons8.com/pastel-glyph/2x/file.png">
                </div>
                    <h1 id="MariaDoc">Doc-exemplo-Joana</h1>
            </div>
        </div>

</div>

<div id="DOCS">
<img id="documentos_logo" src="https://marketplace.canva.com/MAB7OE9Jppw/1/thumbnail_large/canva-folder-file-yellow-document-info-icon.-vector-graphic-MAB7OE9Jppw.png" alt="documentos" onclick="openDocs()">
</div>

<div id="janela">
</div>

<div id="docwindow" style="display: none;">
    <div id="docwindowheader">
    <header class="windowTop">
        <h1 id="docsHeadTexto">Documentos</h1>
    <img id="closeDocs" class="X" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-dialog-close-icon.png" alt="X" onclick="closeMain()">
    </header>
</div>

<div id="bottomWindowDocs">
    <div class="documents">
        <div>
            <img id="DocImg" src="https://img.icons8.com/pastel-glyph/2x/file.png" alt="doc">
            <h1 id="DocEx">Doc-exemplo</h1>
        </div>
    </div>
    <!----<div id="DocExemplo" S>
        <header class="windowhead">
            Documento exemplo
            <img class="X" src="https://banner2.kisspng.com/20180402/dwe/kisspng-computer-icons-social-media-email-webmail-cancel-button-5ac240963875f3.0504665115226799582313.jpg" alt="X" onclick="closeMain()">
            <button id="share">share</button>
            <button id="back">back</button>
        </header>
        <div id="corpo">
            <h4>Este é um exemplo de Documento</h4>
        </div>
    </div>-->
</div>
</div>

<div id="calendario">
        <a id="iconeCal" onclick="abrirCal()"><img src="https://www.manisteelibrary.org/images/events-calendar.png/@@images/image.png"></a>
</div>

<div id="janelaCalendario" style="display:none;">
        <div id="janelaCalendarioHeader">
                <header class="windowTop">
                <img  id="closeCal" class="X" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-dialog-close-icon.png" alt="X" onclick="fecharCal()">
                </header>
        </div>
        <iframe src="https://teamup.com/ksbe6drnzpwdbyrgp2" id="calendar"></iframe>
    </div>

<div id="net" style=display:none;>
                <div id="Netheader">
                <header class="windowTop2">
                    <h1 id="NetTexto">Desk+ Browser</h1>
                <img id="closeNet" class="X" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-dialog-close-icon.png" alt="X" onclick="fecharNet()">
                </header>
            </div>
            <div id="netBottom1">
        <iframe id="netBottom" src="https://www.bing.com/" id="google"></iframe>
            </div>
</div>

<div class="navbar">
    <a id="Home" onclick="location.href = 'PF1.1.html';" ><img src="home.png" id="Home"></a>
    <a id="NET" onclick="openNet()"><img src="NET.png" id="NetImg"></a>
    <a onclick="openAdressb()"><img src="http://download.seaicons.com/icons/paomedia/small-n-flat/1024/address-book-alt-icon.png" id="contact"></a>
</div>

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

Answer 1

不幸的是，没有一个技巧可以解决。

我建议您阅读有关媒体查询的信息！

https://www.w3schools.com/css/css3_mediaqueries_ex.asp