Css，当我的屏幕为 1700px 宽时，宽度 100% 远小于 500px [重复]答案

【问题标题】：Css, width 100% is much smaller than 500px when my screen is 1700px wide [duplicate]Css，当我的屏幕为 1700px 宽时，宽度 100% 远小于 500px [重复]
【发布时间】：2019-10-23 12:21:28
【问题描述】：

我正在尝试为 3-d 地球创建响应式布局，我已将其存储为：

  <div class="text-center main">
      <canvas id='globe' width='100%' height='100%'></canvas>
  </div>

但是，当我给出 700 像素的固定宽度和高度时，它会在我的屏幕上显示我想要的大小。但是，我想让它具有响应性，因此当在手机上显示时，地球不会破碎，而是变小。有人可以解释为什么 100% 小于 500px 并且简单地将百分比增加到 200 ~300 % 可以解决问题吗？

【问题讨论】：

将 div 大小也设置为 100%，而不仅仅是画布，因为画布是子元素，它的边界由其父元素设置
我将画布和 div 都设置为 100% 的宽度和高度，它不会显示完整的地球。我可以使用 px 增加 div 高度，但是我想让它响应。
你试过100vw和100vh吗？

标签： html css

【解决方案1】：

（代码笔：http://jsfiddle.net/hmen49yj/）

您不能在画布元素的宽度和高度属性中使用百分比。

你也不能使用css，因为它会缩放画布。相反，您应该使用 javascript 在开始和调整大小时相对于其容器设置画布大小：

function resized(){
    var canvas = $('#globe');
    canvas.width(canvas.parent().width() );
    canvas.height(canvas.parent().height() );
}
resized();
$("body")[0].onresize = resized;

【讨论】：

我使用了第二个代码并将 % 增加到 700，它似乎工作正常。
@makewhite 正如我所说，chrome 将忽略 % 并将其视为 px。所以你基本上使用700px。不确定其他浏览器。
哦，但是当我使用百分比时，整个地球并没有显示出来，而是放大了很多。
@makewhite 哎呀，似乎 css 百分比会缩放画布。您应该使用 js 设置画布大小，如下所述：stackoverflow.com/a/18680851/4718434
@makewhite 类似这样：jsfiddle.net/hmen49yj

【解决方案2】：

我建议你使用这种方式...

  <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
    *{
        margin:0;
        padding:0
    }
    .main{
        position:absolute;
        width:100%;
        height:100vh;
        background: green;
    }
    #globe{
        position:relative;

        width:70%;
        height:20vh;
        background: red;
    }
    .text-center{
        text-align: center;
    }
</style>
</head>
<body>

<div class="text-center main">
    <canvas id='globe'></canvas>
</div>

</body>
</html>

【讨论】：