CODEWITHSUNDEEP
htmlcss
puk
puk

Reputation: 16762

Using CSS @media based on device instead of width

I know how to use @media to target specific devices based on max-width, like so

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

But is there a quick way to do it based on device, like so

@media screen and (min-width: small) {
    body {
        background-color: lightgreen;
    }
}


@media screen and (min-width: medium) {
    body {
        background-color: black;
    }
}

Upvotes: -1

Views: 70

Answers (2)

ESR
ESR

Reputation: 1679

Yes there is, using a CSS preprocessor, such as Sass, you can do:

$small: 480px;
$medium: 720px;

@media screen and (min-width: $small) {
    body {
        background-color: lightgreen;
    }
}


@media screen and (min-width: $medium) {
    body {
        background-color: black;
    }
}

Upvotes: 1

Shenole Latimer
Shenole Latimer

Reputation: 326

I saw your question about media queries and I used to think of the same question. However, in my opinion, both fubar and Raptor are correct in their answers.

That said, I would like to point out one method of using media queries that I personally feel may be one of the more versatile methods.

I personally believe that using Google Chrome's developer tools and slowly shrinking the screen size to see when certain aspects of your website either looks awkward, or just plain breaks, taking note of those screen sizes and then writing media queries at those breakpoints may be the best way to have your site look good on the widest variety of screen sizes.

From my own personal experience, once I start concentrating too much on specific device sizes, particularly when it comes to dealing with the different screen sizes of Android vs Apple products, I inevitably had to go down entire product lines to nail the different classes of screen sizes. That makes for code that can become convoluted in a hurry!

I know this answer doesn't have specific code and can be considered more of an opinion than Dev Bible fact, but I strongly feel that the method I described is the one that (especially if you are not too experienced and are not aware of the various classes of mobile device screen sizes/resolutions out there) will yield the most versatile results.

I hope that helps puk. And if you or anybody feels differently or would like to provide a contrary opinion, please feel free to present it. I do not claim to know everything and am always eager to learn new things, methods and points of view!

Upvotes: 1

Related Questions