画布元素的媒体查询答案

【问题标题】：Media Queries for Canvas Element画布元素的媒体查询
【发布时间】：2021-11-01 18:12:13
【问题描述】：

我目前正在自学基本的网页设计。根据我的理解，在使网站响应不同的屏幕尺寸（手机、平板电脑、计算机等）时，您会使用 CSS 媒体查询。然而，我的网站有一个 canvas 元素，我学到了一个艰难的方法（在想了很久为什么它不起作用之后），你不仅要在 CSS 中设置宽度和高度，还要在元素的 HTML 属性中设置使其正常工作。所以现在我的问题是：什么是使画布元素响应的最佳方法，这意味着它根据屏幕尺寸改变尺寸，而这两个东西都必须改变才能工作？

【问题讨论】：

标签： html css html5-canvas

【解决方案1】：

您可以在 CSS 中“描述”您的属性。例如：

<div class="responsive"></div>

是你的 HTML 所以添加

.responsive{ ... width: 100%;}

让 div 做出响应。

添加width: 100%; 会使属性随着站点的变化而改变形状。

【讨论】：

也许我没有正确地提出我的问题。我有一个画布元素，其宽度和高度属性 (HTML) 及其宽度和高度属性 (CSS) 设置为 500px。现在，当屏幕总共小于 500 像素时，我希望此值为 250px（HTML 和 CSS）。要更改 CSS 值，我可以执行 @media (max-width: 500px) { canvas { width: 250px; height: 250px } } 之类的操作。我想知道的是：屏幕变小了怎么也改HTML属性？
理论上你可以应用最大和最小宽度来使 div 响应。如果那不是您要查找的内容，请检查诸如 SASS 之类的 CSS 预处理器以生成 if else 语句。问题是 SASS 条件是在编译时评估的，而不是在运行时评估的。另一种方法是使用 2 个不同的图像（1 个较小的 250 像素和 1 个较大的 500 像素）并使用不透明度隐藏较大的元素：0；当页面变小并显示另一个时，取消隐藏另一个。如果此评论对您有帮助，请关闭帖子，如果没有，请在此处发布另一个有关问题的评论。