Question

我正在尝试让我的网站页脚响应。我使用400 px的最小宽度为网站增加页脚的高度，但它不起作用。请让我知道如何为小屏幕增加页脚的高度。

这是代码，

@media screen and (min-width: 400px;) {
    #copyright {
        height:50px;
    }
}

编辑：这是我的代码，

@media screen and (max-width: 400px) {
    #copyright {
        height:50px;
    }
}

Answer 1

它应该是最大宽度，因此您可以将屏幕定位到最大400px宽度。对于最小宽度，如果最小宽度为400px，则告诉您应用css规则：）

http://jsfiddle.net/h42p5x0h/

＆＃13;

#copyright {
  height: 20px;
  background: #000;
  color: #fff;
}
@media handheld,
only screen and (max-width: 400px),
only screen and (max-device-width: 400px) {
  #copyright {
    height: 50px;
    background: #f00;
  }
}

＆＃13;

<div id="copyright">Copyright<div>

＆＃13;

Answer 2

所以你希望你的#copyright页脚在小屏幕上高50像素（即：最大宽度= 400px的屏幕）

那么你的CSS规则应该是：

@media screen and (max-width: 400px) {
    #copyright {
        height:50px;
    }
}

请注意，媒体查询中没有;

这是一个有效的fiddle

使页脚响应的最小宽度应该是多少？

2 个答案: