使用具有类名称的媒体查询来更改网站宽度

Question

我有一个移动应用程序,我想要全屏爆炸.Twitter Bootstrap为我提供了手机,平板电脑和所有信息的大小.我想要一个CSS类来处理所有不同类型的大小.我正在寻找这样的东西:

@media (max-width: 480px) classname

@media (max-width: 767px) classname

等等

Answer 1

像这样的东西？

@media (max-width: 767px) {
  .classname {
    width: 80%;
  }
}

@media (max-width: 480px) {
  .classname {
    width:100%;
  }
}

请注意,max-width最后设置较小的媒体查询,以允许它覆盖较大的媒体查询max-width.

有关使用媒体查询的更多信息,请参阅此文章