CODEWITHSUNDEEP
htmlcssmedia-queries
qwertymaster
qwertymaster

Reputation: 341

Using media queries in html

I wrote a simple HTML program for experimental purposes:
Here is the code: 

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: green;
}

@media screen and (device-height: 375px) and (device-width: 667px) {
    body {
        background-color: blue;
    }
}
</style>
</head>
<body>

<p>Media queries are simple filters that can be applied to CSS styles. They make it easy to change styles based on the characteristics of the device rendering the content, including the display type, width, height, orientation and even resolution.</p>

</body>
</html>

But ut doesn't change color when it is tried in iPhone 6. What is wrong with the code? Is logical expression correct?

Upvotes: 2

Views: 1062

Answers (3)

shamrock
shamrock

Reputation: 47

Use max-device-width and min-device-height.

@media all and (min-device-width: XXXpx) and (max-device-width: XXXpx)

Upvotes: 1

cari
cari

Reputation: 2300

this works for me on the iphone 6:

@media only screen and (min-device-width: 374px) and (max-device-width: 376px)

this works on the iphone 6+:

@media only screen and (min-device-width: 413px) and (max-device-width: 415px)

Upvotes: 1

user3589536
user3589536

Reputation: 204

This works in a browser and hopefully on your IPhone too:

(Max-width and min-width instead of device-height and device-width)

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: green;
}

@media screen and (max-height: 375px) and (max-width: 667px) {
    body {
        background-color: blue;
    }
}
</style>
</head>
<body>

<p>Media queries are simple filters that can be applied to CSS styles. They make it easy to change styles based on the characteristics of the device rendering the content, including the display type, width, height, orientation and even resolution.</p>

</body>
</html>

Upvotes: 1

Related Questions