文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >Html和CSS页面不会随浏览器大小而缩放

问Html和CSS页面不会随浏览器大小而缩放
EN

Stack Overflow用户
提问于 2019-06-12 05:03:28
回答 3查看 169关注 0票数 0

这是我的HTML和CSS代码。不管出于什么原因，不管我只使用了%s和vw，它都不能正确地缩小。

​

代码语言：javascript
复制
<!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之外，我不知道还能做什么。是不是我用了div？

html
css
EN

回答 3

Stack Overflow用户

发布于 2019-06-12 05:31:28

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

请参阅：MDN w3

​

代码语言：javascript
复制
.pix {
  height: 50px;
  width: 50px;
  background-color: red;
}

.v {
  width: 100vw;
  height: 20vh;
  background-color: purple;
  font-size: 5vw;
}
代码语言：javascript
复制
<div class="pix">
<p>Pixels</p>
</div>

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

​

票数 2
EN

Stack Overflow用户

发布于 2019-06-12 05:32:53

你的代码中有很多地方是错误的。首先，您没有在顶部打开body标记，所以我将其上移(并将内联样式放在css中)。其次，您没有正确地关闭标记；没有关闭任何h1标记，关闭的</form>标记和关闭的</body>标记都丢失了。<Img>是一个自动结束的标签，它不需要结束'‘--只需要一个'/>’结尾。

这些只是几点建议。你的代码中有很多内联风格，你可能需要重新考虑一下。作为补充，css是按照编写的方式进行解释的，所以将html/body css放在样式表的顶部(它的应用速度会更快！)

希望这能有所帮助。

附言:尝试使用相对位置而不是绝对位置！更适合响应式设计..

​

代码语言：javascript
复制
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%;
}
代码语言：javascript
复制
<!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>

​

票数 1
EN

Stack Overflow用户

发布于 2019-06-12 05:14:57

尝试使用'vh‘作为高度，使用'vw’作为宽度。

例如：

代码语言：javascript
复制
.content {
  height: 100vh; //it will make the height 100% of your browser screen
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/56551641

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档