有没有办法让 div 的宽度等于 100% 直到断点，之后它的宽度为 30%

Question

我有一个 div

 <body style="width: 100vw; height: 100vh"> <div id="containerDiv"> <div id="canvasDiv" /> </div> </body>

我如何能够在大屏幕上使canvasDiv的宽度为containerDiv的 30%，并且在特定的屏幕宽度尺寸及以下，使canvasDiv的宽度为containerDiv的 100%？

提示/建议使用 Bootstrap 会更可取（并且可能也更容易）。 到目前为止，我已经部分弄清楚了； 如果我做

 <body style="width: 100vw; height: 100vh"> <div id="containerDiv" style="width: 100%; height: 100%"> <div id="canvasDiv" class="container-md m-md-0" /> </div> </body>

那么canvasDiv是在 Bootstrap 的md断点（768px）以下和md断点以上 720px 宽的containerDiv宽度的 100%。 有没有办法我可以（不使用 Sass）覆盖它并将其设为 30% 而不是 720px？

在写这篇文章时，我意识到我可能会问两个不同的问题。 任何一个的答案都会很好。 另外，我在网上找不到任何资源来做这样的事情； 我希望重定向到相关主题，因为我确实想了解内容和方式，而不是仅仅获得答案。

Answer 1

用CSS：

         @media only screen and (min-width: 768px) {
             #canvasDiv {
                 width: 30vw;
             }
         }