HTML和CSS页面将无法随着浏览器大小缩放

时间：2019-06-11 21:03:28

标签： html css

这是我的HTML和CSS代码。无论出于何种原因，无论我仅使用％还是vw，它都无法正确缩小。主菜单div和Drink div是动态填充的，这在格式化方面增加了进一步的挑战。

<!DOCTYPE HTML>

<html>
<link rel="stylesheet" href="assets/styles/normalize.css">
<link rel="stylesheet" href="assets/styles/main.css">
<style>
  #percentageSize {
    width: 16%;
    height: auto;
    margin-top: -5%;
    margin-right: 1%;
    margin-left: -45%;
  }
  
  #percentageSize1 {
    width: 16%;
    height: auto;
    margin-top: -1%;
    margin-left: -400%;
  }
  
  .drinks {
    height: 100%;
    width: 100%;
    margin-left: 220%;
    margin-top: 2.5%;
    position: absolute;
    margin-top: -53.5%;
  }
  
  #thumbs {
    width: 100%;
    height: 100%;
  }
  
  .entree {
    height: 100%;
    width: 100%;
    margin-left: -5%;
    margin-top: 7%;
    position: absolute;
    top: 34%;
  }
  
  h1 {
    text-align: center;
  }
  
  .Joey {
    font-size: 3vw;
    margin-top: -18%;
  }
  
  h2 {
    text-align: right;
  }
  
  #continue {
    background-color: lightgrey;
    font-size: 1.1vw;
    padding: 1%;
  }
  
  #clear {
    padding: 1%;
    background-color: lightgrey;
    font-size: 1.1vw;
  }
  
  #add {
    padding: 1%;
    background-color: lightgrey;
    font-size: 1.1vw;
  }
  
  html {
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(http://www.crossfitsofla.com/wp-content/uploads/2019/01/food.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  
  .header-right {
    text-decoration: none;
    margin-top: -8%;
    position: absolute;
    font-size: 2vw;
    color: black;
    margin-left: 65%;
    z-index: 1;
    font-family: Georgian
  }
  
  .buttons {
    margin-top: -6%;
  }
  
  .more {
    margin-top: 5%;
  }
  
  .Joey {
    color: PapayaWhip;
  }
</style>
<div class=stuff>
  <div class=Joey>
    <h1> Joey's Resturant
      <h1>
  </div>
  <div class="header-right">
    <a class="active" href="Entree Chooser.php" style="color: PapayaWhip; font-size: 2.3vw; font-family: Brush Script MT;">Order</a>
    <a href="email.php" style="color: PapayaWhip; font-size: 2.3vw; font-family:Brush Script MT;  ">Contact</a>
    <a href="real Home.html" style="color: PapayaWhip; font-size: 2.3vw; font-family: Brush Script MT;  ">Home</a>
    <a href="menue.php" style="color: PapayaWhip; font-size: 2.3vw; font-family: Brush Script MT;  ">Menue</a>

  </div>
  <div class=more>
    <h1> <span style="font-family:Georgian; font-size: 3.2vw;  color:white; "> Your Cart: </span>
      <h1>
  </div>
</div>
<div class=buttons>
  <form action="handler2.php" method="post" name="formDemo">
    <input type='submit' id='clear' value='Clear' name='button2' />
    <input type='submit' id='add' value='Checkout' name='adder' />
    <input type='submit' id='continue' value='Continue Shopping' name='cancle' />
</div>


<br>
<br>

<body style="margin:75px;padding:75px">





  <h1> <span style='margin-left: -91%; font-size: 3vw; text-decoration: underline; font-family:Georgian; color: 	white;'>  Entrees: </span>
    <h1>
      <h1> <span style='margin-left:7%; margin-top: -5%; text-decoration: underline;  position:absolute; font-size: 3vw; font-family:Georgian; color: 	white;'>  Drinks: </span>
        <h1>
          <h1> <span style='font-family:Georgian; font-size: 3vw; color:white; position: absolute;  margin-left:8%; margin-top:-12%;'> 10456.71 </span>
            <h1>
              <div class='entree'>
                <h1> <span style='font-family:Georgian; font-size: 2vw; position:absolute;  margin-left: -50%; margin-top: 0%; color: PapayaWhip;'> Cheese Steak</span>
                  <h1>

                    <label>
         <img id='percentageSize' src='pics/steak.png' >  </img>
        </label>
                    <h1> <span style='font-family:Georgian; font-size: 1.5vw; margin-left: -50%; margin-top: -13%; position:absolute;  color: PapayaWhip;'>  Quantity: 1</span>
                      <h1><br>
                        <h1> <span style='font-family:Georgian; font-size: 2vw; position:absolute;  margin-left: -50%; margin-top: 0%; color: PapayaWhip;'> Breakfast Burrito</span>
                          <h1>

                            <label>
         <img id='percentageSize' src='pics/burrito.png' >  </img>
        </label>
                            <h1> <span style='font-family:Georgian; font-size: 1.5vw; margin-left: -50%; margin-top: -13%; position:absolute;  color: PapayaWhip;'>  Quantity: 1106</span>
                              <h1><br>
                                <div class='drinks'>
                                  <h1> <span style='font-family:Georgian; font-size: 2vw; position:absolute; margin-left: -224%; margin-top: 3.5%; color: PapayaWhip;'> Coke</span>
                                    <h1>

                                      <label>
         <img id='percentageSize1' src='pics/coke.png' >  </img>
        </label>
                                      <h1> <span style='font-family:Georgian; font-size: 1.5vw; margin-left: -224%; margin-top: -17.5%; position:absolute;  color: PapayaWhip;'>  Quantity: 1</span>
                                        <h1>
                                          <h1> <span style='font-family:Georgian; font-size: 2vw; position:absolute; margin-left: -224%; margin-top: 3.5%; color: PapayaWhip;'> Pepsi</span>
                                            <h1>

                                              <label>
         <img id='percentageSize1' src='pics/pepsi.png' >  </img>
        </label>
                                              <h1> <span style='font-family:Georgian; font-size: 1.5vw; margin-left: -224%; margin-top: -17.5%; position:absolute;  color: PapayaWhip;'>  Quantity: 700</span>
                                                <h1>
                                                  <h1> <span style='font-family:Georgian; font-size: 2vw; position:absolute; margin-left: -224%; margin-top: 3.5%; color: PapayaWhip;'> Red Bull</span>
                                                    <h1>

                                                      <label>
         <img id='percentageSize1' src='pics/redbull.png' >  </img>
        </label>
                                                      <h1> <span style='font-family:Georgian; font-size: 1.5vw; margin-left: -224%; margin-top: -17.5%; position:absolute;  color: PapayaWhip;'>  Quantity: 84</span>
                                                        <h1>
                                </div>
                                <div id='thumbs'></div> <span class='stretch'></span> </div>

</html>

任何帮助都将是惊人的。除了使用％和vw之外，我不确定该怎么做。也许是我对div的使用？

3 个答案:

答案 0 :(得分：2)

VW和VH分别代表视图宽度和视图高度。这意味着您应用了这些元素的元素将在任何缩放或设备上保持相同的大小，因为它是按视口的百分比计算的。例如，我可以有一个<h1>的{​​{1}}元素。这意味着我的font-size将是设备视口宽度的10％。

请参阅： MDN w3 

10vw
<h1>

答案 1 :(得分：1)

您的代码有很多错误。 首先，您没有在顶部打开body标签，所以我将其向上移动（并将内联样式放在CSS中）。其次，您没有正确关闭标签； h1标签没有被关闭，</form>标签也没有丢失，</body>标签也没有关闭。 <Img>是一个自动关闭的标签，它不需要结束符”-只需在结尾加上一个“ />”。

这些只是一些指针。您的代码中有很多内联样式，您可能需要重新考虑。作为附录，css会按其解释方式进行解释，因此请将html / body css放在样式表的顶部（开始时会更快地应用！）

希望这会有所帮助。

p.s尝试使用相对位置而不是绝对位置！更适合响应式设计。

html {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(http://www.crossfitsofla.com/wp-content/uploads/2019/01/food.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {
  margin: 75px;
  padding: 75px;
}

#percentageSize {
  width: 16%;
  height: auto;
  margin-top: -5%;
  margin-right: 1%;
  margin-left: -45%;
}

#percentageSize1 {
  width: 16%;
  height: auto;
  margin-top: -1%;
  margin-left: -400%;
}

.drinks {
  height: 100%;
  width: 100%;
  margin-left: 220%;
  margin-top: 2.5%;
  position: absolute;
  margin-top: -53.5%;
}

#thumbs {
  width: 100%;
  height: 100%;
}

.entree {
  height: 100%;
  width: 100%;
  margin-left: -5%;
  margin-top: 7%;
  position: absolute;
  top: 34%;
}

h1 {
  text-align: center;
}

.Joey {
  font-size: 3vw;
  margin-top: -18%;
  color: PapayaWhip;
}

h2 {
  text-align: right;
}

#continue {
  background-color: lightgrey;
  font-size: 1.1vw;
  padding: 1%;
}

#clear,
#add {
  padding: 1%;
  background-color: lightgrey;
  font-size: 1.1vw;
}

.header-right {
  text-decoration: none;
  margin-top: -8%;
  position: absolute;
  font-size: 2vw;
  color: black;
  margin-left: 65%;
  z-index: 1;
  font-family: Georgian;
}

.buttons {
  margin-top: -6%;
}

.more {
  margin-top: 5%;
}
<!DOCTYPE HTML>

<html>
<head>
<link rel="stylesheet" href="assets/styles/normalize.css">
<link rel="stylesheet" href="assets/styles/main.css">
<style>

</style>
</head>
<body>
  <div class="stuff">
    <div class="Joey">
      <h1> Joey's Resturant
      </h1>
    </div>
    <div class="header-right">
      <a class="active" href="Entree Chooser.php" style="color: PapayaWhip; font-size: 2.3vw; font-family: Brush Script MT;">Order</a>
      <a href="email.php" style="color: PapayaWhip; font-size: 2.3vw; font-family:Brush Script MT;  ">Contact</a>
      <a href="real Home.html" style="color: PapayaWhip; font-size: 2.3vw; font-family: Brush Script MT;  ">Home</a>
      <a href="menue.php" style="color: PapayaWhip; font-size: 2.3vw; font-family: Brush Script MT;  ">Menue</a>

    </div>
    <div class="more">
      <h1> <span style="font-family:Georgian; font-size: 3.2vw;  color:white; "> Your Cart: </span>
      </h1>
    </div>
  </div>
  <div class="buttons">
    <form action="handler2.php" method="post" name="formDemo">
      <input type='submit' id='clear' value='Clear' name='button2' />
      <input type='submit' id='add' value='Checkout' name='adder' />
      <input type='submit' id='continue' value='Continue Shopping' name='cancle' />
    </form>
  </div>


  <br>
  <br>

  <h1> <span style='margin-left: -91%; font-size: 3vw; text-decoration: underline; font-family:Georgian; color: 	white;'>  Entrees: </span>
  </h1>
  <h1> <span style='margin-left:7%; margin-top: -5%; text-decoration: underline;  position:absolute; font-size: 3vw; font-family:Georgian; color: 	white;'>  Drinks: </span>
  </h1>
  <h1> <span style='font-family:Georgian; font-size: 3vw; color:white; position: absolute;  margin-left:8%; margin-top:-12%;'> 10456.71 </span>
  </h1>
  <div class='entree'>
    <h1> <span style='font-family:Georgian; font-size: 2vw; position:absolute;  margin-left: -50%; margin-top: 0%; color: PapayaWhip;'> Cheese Steak</span>
    </h1>

    <label>
         <img id='percentageSize' src='pics/steak.png' /> 
        </label>
    <h1> <span style='font-family:Georgian; font-size: 1.5vw; margin-left: -50%; margin-top: -13%; position:absolute;  color: PapayaWhip;'>  Quantity: 1</span>
    </h1><br>
    <h1> <span style='font-family:Georgian; font-size: 2vw; position:absolute;  margin-left: -50%; margin-top: 0%; color: PapayaWhip;'> Breakfast Burrito</span>
    </h1>

    <label>
         <img id='percentageSize' src='pics/burrito.png'/>
        </label>
    <h1> <span style='font-family:Georgian; font-size: 1.5vw; margin-left: -50%; margin-top: -13%; position:absolute;  color: PapayaWhip;'>  Quantity: 1106</span>
    </h1><br>
    <div class='drinks'>
      <h1> <span style='font-family:Georgian; font-size: 2vw; position:absolute; margin-left: -224%; margin-top: 3.5%; color: PapayaWhip;'> Coke</span>
      </h1>

      <label>
         <img id='percentageSize1' src='pics/coke.png'/>
        </label>
      <h1> <span style='font-family:Georgian; font-size: 1.5vw; margin-left: -224%; margin-top: -17.5%; position:absolute;  color: PapayaWhip;'>  Quantity: 1</span>
      </h1>
      <h1> <span style='font-family:Georgian; font-size: 2vw; position:absolute; margin-left: -224%; margin-top: 3.5%; color: PapayaWhip;'> Pepsi</span>
      </h1>

      <label>
         <img id='percentageSize1' src='pics/pepsi.png' />
        </label>
      <h1> <span style='font-family:Georgian; font-size: 1.5vw; margin-left: -224%; margin-top: -17.5%; position:absolute;  color: PapayaWhip;'>  Quantity: 700</span>
      </h1>
      <h1> <span style='font-family:Georgian; font-size: 2vw; position:absolute; margin-left: -224%; margin-top: 3.5%; color: PapayaWhip;'> Red Bull</span>
      </h1>

      <label>
         <img id='percentageSize1' src='pics/redbull.png' />
        </label>
      <h1> <span style='font-family:Georgian; font-size: 1.5vw; margin-left: -224%; margin-top: -17.5%; position:absolute;  color: PapayaWhip;'>  Quantity: 84</span>
      </h1>
    </div>
    <div id='thumbs'></div> <span class='stretch'></span> </div>
</body>

</html>

答案 2 :(得分：0)

尝试将“ vh”用于高度，将“ vw”用于宽度。

例如：

.content {
  height: 100vh; //it will make the height 100% of your browser screen
}
相关问题
最新问题