个人中心
gpt4 book ai didi

HTML 和 CSS 页面不会随浏览器大小缩放

转载 作者：太空宇宙 更新时间：2023-11-03 22:16:30 25 4
gpt4 key购买 nike

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

任何帮助都会很棒。我不知道除了使用 % 和 vw 之外还能做什么。可能是我使用了 div？

最佳答案

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

参见: 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>

关于HTML 和 CSS 页面不会随浏览器大小缩放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56551641/

25 4 0
文章推荐： angularjs - 使用 angularjs 时如何仅在 Meanjs 中保护经过身份验证的用户的功能
文章推荐： c# - 将 Excel 列格式化为文本
文章推荐： c# - Sharepoint + Javascript，将列表项移动/复制到另一个文件夹
文章推荐： c# - 如何从 x64 构建应用程序？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com