画布元素的媒体查询
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;当页面变小并显示另一个时,取消隐藏另一个。如果此评论对您有帮助,请关闭帖子,如果没有,请在此处发布另一个有关问题的评论。以上是关于画布元素的媒体查询的主要内容,如果未能解决你的问题,请参考以下文章