CODEWITHSUNDEEP
androidhtmlcssiphonemobile
Ben
Ben

Reputation: 9001

CSS: Applying Multiple Media Queries

I have two .css files - one for desktop, and one for (the majority of) mobile devices. However, the CSS code applies to several @media conditions - and I cannot get them to work across all devices.

For example, for iPhone, the @media query looks something like:

@media only screen and (min-device-width : 360px) and (max-device-width : 480px){
    /* iPhone styling */
}

If I wish to apply the same styles to a HTC One, I need to use:

@media only screen and (-webkit-min-device-pixel-ratio: 3) and (max-device-width:1920px){
    /* HTC One styling */
}

If I have two identical .css files - one with the first condition and one with the second - the website displays exactly how I want on both devices. However, when making a change this means that I need to edit multiple files.

I have tried combining the condition like so:

@media only screen and (min-device-width : 360px) and (max-device-width : 480px),
@media only screen and (-webkit-min-device-pixel-ratio: 3) and (max-device-width:1920px) {
    /* Generic mobile device styling */
}

but when testing on both the HTC and the iPhone, only the iPhone appears with my desired styling.

How can I get the same .css styling to apply to multiple @media conditions?

Upvotes: 1

Views: 228

Answers (1)

kulak
kulak

Reputation: 882

According to this documentation, you shouldn't repeat @media after the coma. The following code should work:

@media only screen and (min-device-width : 360px) and (max-device-width : 480px),
only screen and (-webkit-min-device-pixel-ratio: 3) and (max-device-width:1920px) {
    /* Generic mobile device styling */
}

Upvotes: 2

Related Questions