Menu
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
748
Max-width and min-width can be used together to target a specific range of screen sizes. @media only screen and (max-width: 600px) and (min-width: 400px) {...} The query above will trigger only for screens that are 600-400px wide. This can be used to target specific devices with known widths.
They cannot be used to refer to a certain element on a page. If you need to apply styles depending on the size of a certain div element on your page, you'll have to use JavaScript to observe changes in the size of that div element instead of media queries.
If you want to include both min and max width for responsiveness in the browser, then you can use the following: @media (min-width: 768px) and (max-width: 992px){...} @media (min-width: 480px) and (max-width: 767px) {...} Save this answer.
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.
96
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
