使用 vh 和 vw 时 CSS 网页无响应答案

【问题标题】：CSS Web page not responsive when using vh and vw使用 vh 和 vw 时 CSS 网页无响应
【发布时间】：2017-11-08 08:51:24
【问题描述】：

我有以下简单的网页。在这里，我使用 vh 作为图像高度。但是当我将其调整为小屏幕尺寸时，背景部分的大小无法正确调整大小。

在不移除 vh 的情况下有没有解决这个问题的方法。

<html lang="en">
<head>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <style>

   section{
       background-color: rgb(200,200,200);
       padding: 10px 0px 30px 0px;
   }

   .edit_image img{
       max-height: 80vh;
       padding: 30px 30px 30px 30px;
    }

   </style>
</head>
<body>
    <div class="container-full" style="padding: 20px;"> 
        <section>
            <div class="row">
              <div class="col-md-12 col-sm-12  text-center">
                <div class='edit_image' img_id=0><img src='http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/Desktop-Wallpaper-4.jpg'></div>           
              </div>
            </div>
        </section>
    </div>
</body>
</html>

错误（小屏幕）：

正确（普通网页）：

【问题讨论】：

标签： css twitter-bootstrap responsive-design

【解决方案1】：

这是适合您的有效解决方案。基本上只是将 max-width 添加到 css 中。还创建了一个小提琴https://jsfiddle.net/9p619qwq/

请注意，当页面变小时，固定的内边距（<section> 和 <img>）会导致问题，因为宽度和内边距比率会重叠。

section{
  background-color: rgb(200,200,200);
  padding: 10px 0px 30px 0px;
  text-align: center;
}

.edit_image img{
  max-height: 80vh;
  max-width: 80vw;
  padding: 30px;
}

<div class="container-full" style="padding: 20px;"> 
  <section>
    <div class="row">
      <div class="col-md-12 col-sm-12  text-center">
        <div class='edit_image' img_id=0>
          <img src='http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/Desktop-Wallpaper-4.jpg'>
        </div>           
      </div>
    </div>
  </section>
</div>

【讨论】：

【解决方案2】：

嘿，我注意到你忘了添加视口元数据：

<meta name="viewport" content="width=device-width" />也许这会解决你的问题

【讨论】：