With Media Queries is there a "everything else" kind of thing?

Question

** Amateur warning **

I'd like to have four settings for my CSS, and I'd like the last one to be a "everything else" kind of media query, is there such a thing???

These are my first three queries:

@media only screen and (min-width: 1024px) and (min-height: 940px) /* for large displays */
@media only screen and (min-width:1024px) and (min-height:689px) and (max-height:939px) /* for smaller displays */
@media only screen and (max-width:1024px) and (max-height:900px) /* for ipad n the like */

Now I'd like one to respond to anything else I might have left out... I hope I make sense...

Answer 1

.class { 
    //this is everything else
}

@media (max-width:768px) { //or whatever px you're using
    .class{
        //styling for .class on mobile
    }
}

Anything that has class="class" will get the first (non-media query) .class styling. Anything that falls within your media query pixel definition will get the media query styling (second .class in this example).

Side note: I have used media queries with bootstrap and I have not come across height media queries, in my experience it is done with width only. I am not sure if there is added value in doing height, maybe it allows you to get very specific, but for me that would be too much to manage.