画布元素的媒体查询

Posted

技术标签:

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

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

【问题讨论】:

【参考方案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;当页面变小并显示另一个时,取消隐藏另一个。如果此评论对您有帮助,请关闭帖子,如果没有,请在此处发布另一个有关问题的评论。

以上是关于画布元素的媒体查询的主要内容,如果未能解决你的问题,请参考以下文章

为啥 !important 需要 h1 元素媒体查询才能工作? [复制]

为啥我的媒体查询将元素从容器中取出?

媒体查询

带有媒体查询的 chrome 中的错误

01.媒体查询

可以在媒体查询中删除 ::after 伪元素吗?