html - 如何创建媒体查询

Question

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

HTML

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

我本来希望以通常的方式声明宽度和高度属性。但这似乎不起作用：

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;
}