Html 具有引导功能的响应画布

我正在努力解决这个问题。我已经在一个引导列中有一些画布（用作层）。目前，它在计算机中正常工作，但我想让画布对手机做出响应

我的专栏是：

<div class="col-md-8 my-container2">

  <div>
    <div id="fileName"> Upload a fragments file
      <button id="infoPopover" type="button" class="btn btn-warning btn-xs btn-padding" data-container="body" data-toggle="popover" data-placement="right" data-content="Not file loaded" data-html="true">
        ?
      </button>
    </div>
  </div>

  <!-- ---------- CANVAS -------------------- -->
  <div id="canvasContainer" class="col-centered">
    <canvas id="myCanvasGrid" width="600" height="550"></canvas>
    <canvas id="myCanvas" width="500" height="500"></canvas>
    <canvas id="myCanvasLayer1" width="500" height="500"></canvas>
  </div>

</div>

我读过并尝试过一些东西，比如改变%的宽度等等，但它总是崩溃。这就是它现在的样子：

这就是如果我用%代替px的结果：

我只是想知道我应该做什么：专栏？画布？因为如果我把列放在100%x100%的位置，它看起来就像第二张图片，画布不会调整大小

---

提前感谢。

只需在css中添加

宽度：100%

。另外，作为一个好的实践，我建议在css中使用

max-width

和

max-height

，而不是提及内联宽度和高度

 #myCanvas {
   background-color: transparent;
   border:1px solid #000000;
   position: absolute;
   z-index: 2;
   margin-top: 25px;
   margin-left: 50px;
   width: 100%;
 }

 #myCanvasLayer1 {
   background-color: transparent;
   border:1px solid #000000;
   position: absolute;
   z-index: 1;
   margin-top: 25px;
   margin-left: 50px;
   width: 100%;
 }

 #myCanvasGrid {
   background-color: white ;
   border:1px solid #000000;
   position: absolute;
   z-index: 1;
   width: 100%;
 }

---

显而易见的问题是，您的

画布
元素都有固定的宽度。这就是画布上%的情况：可能重复：
 #myCanvas {
   background-color: transparent;
   border:1px solid #000000;
   position: absolute;
   z-index: 2;
   margin-top: 25px;
   margin-left: 50px;
   width: 100%;
 }

 #myCanvasLayer1 {
   background-color: transparent;
   border:1px solid #000000;
   position: absolute;
   z-index: 1;
   margin-top: 25px;
   margin-left: 50px;
   width: 100%;
 }

 #myCanvasGrid {
   background-color: white ;
   border:1px solid #000000;
   position: absolute;
   z-index: 1;
   width: 100%;
 }