css - 使用带有类名的媒体查询来更改网站宽度

Question

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

@media (max-width: 480px) classname

@media (max-width: 767px) classname

ETC

score 15 · Accepted Answer

像这样的东西？

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

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

请注意，具有较小的媒体查询max-width设置在最后，以允许它覆盖具有较大的媒体查询max-width。

有关使用媒体查询的更多信息，请参阅本文。

score 3 · Accepted Answer

你也可以根据html元素和id来改变css。max-width作品从 0 到最大给定宽度，或者如果min-width给出则从给定min-width到max-width。

例如：

@media screen and (max-width: 767px) {
    #YourElementId{
        width:100%;
    }
    YourElementName {
        width:80%;
    }
}

上面的 css 将从 0 到媒体屏幕的最大给定宽度工作。

另一方面，min-width例如，适用于超过给定宽度

@media screen and (min-width: 768px) {
    #YourElementID {
        width:80%; 
    }
    body {
        width:75%; 
    }
}

这仅在媒体屏幕宽度大于768px时才有效。

2 回答 2