Question

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

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

但是，当我提供固定的700px宽度和高度时，它将在屏幕上显示我想要的尺寸。但是，我想使其具有响应性，因此当显示在手机上时，地球不会破裂而是会变小。有人可以解释为什么100％小于500px并简单地将百分比提高到200〜300％可以解决此问题吗？

Answer 1

（Codepen：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;

Answer 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>

CSS，当我的屏幕为1700px时，宽度100％比500px小得多

2 个答案: