时间戳

首页 > 解决方案 > Html 和 CSS 页面不会随浏览器大小缩放

html - Html 和 CSS 页面不会随浏览器大小缩放

问题描述

这是我的 HTML 和 CSS 代码。无论出于何种原因，无论我只使用 %'s 和 vw's，它都不会正确缩小。主菜 div 和饮料 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>

任何帮助都会很棒。我不知道除了使用 %'s 和 vw's 还能做什么。也许是我使用 div 的？

标签： htmlcss

解决方案

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

参见： MDN w3

.pix {
  height: 50px;
  width: 50px;
  background-color: red;
}

.v {
  width: 100vw;
  height: 20vh;
  background-color: purple;
  font-size: 5vw;
}
<div class="pix">
<p>Pixels</p>
</div>

<div class="v">
<p>Viewport Based</p>
</div>

推荐阅读