如何为<canvas> </canvas>创建媒体查询

Question

我想创建一个媒体查询来更改canvas标签的宽度和高度。

HTML

<canvas id="clock" width="250" height="250">
</canvas>

我原本希望以通常的方式声明width和height属性。但这似乎不起作用：

CSS

#clock {
    width:250;
    height:250; 
}

@media (max-width: @screen-small) {
    #clock {
        width:200;
        height:200;
    }
}

我错过了什么？

Answer 1

您的规则中缺少<length>个值 - 请以px为例：

#clock {
   width: 250px;
   height: 250px;
}

@media (max-width: @screen-small) {
    #clock {
        width:200px;
        height:200px;
    }
}

示例：http://jsfiddle.net/mjt87/

Answer 2

您需要设置一个单位。据我所知，HTML标签中的width和height属性是唯一缺少单位的地方，假设为px的数量。

#clock {
    width:250px;
    height:250px;
}