Using Media Queries with Class Names to Change Website Width

Question

I have a mobile application that I want to blow up full-screen. Twitter Bootstrap gives me the size for phones, tablets, and all that information. I would like a CSS class to handle all of the different types of sizes. I'm looking for something like this:

@media (max-width: 480px) classname

@media (max-width: 767px) classname

etc

Answer 1

Something like this?

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

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

Note that the media query with the smaller max-width is set last to allow it to override the media query with the larger max-width.

See this article for more on using media queries.