Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Media / Responsive

Responsive CSS @media Queries

Post a Comment
For making responsive my website I'm using media queries like this but when I try to test my website there is some issue I've facing. One kind of issue is @media 320px is alright

Solution 1:

That's wrong code.. @media screen and (min-width: 320px){ this code will run at screen 320px and above if you put the code here of course this code will run at 480px and 680px }

top prevent that code from the 480px and 680px Make it like this @media screen and (min-width: 320px) and (max-width: 479px){ the code here }


Solution 2:

Try this. 

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

@media screen and (max-width: 850px) {
    body {
        background-color: lightcoral;
    }
}
@media screen and (max-width: 480px) {
    body {
        background-color: lightgreen;
    }
}
</style>
</head>
<body>

<h1>Resize the browser window to see the effect!</h1>
<p>The media query will only apply if the media type is screen and the viewport is 480px wide or wider.</p>

</body>
</html>

Solution 3:

Try blow code:

@media screen and (max-width: 320px){code} @media (min-width: 320px) and (max-width: 480px) {code} @media (min-width: 480px) and (max-width: 640px) {code} I hope your problem will be solved


Solution 4:

(edit note: corrected a few typos and errors)

You have to consider that CSS is "cascading" (= falling down), which means: If you have two different rules for the same element, the latter (= lower) will override the earlier one. So in your first code example:

@media screen and (max-width: 320px){code}
@media screen and (max-width: 480px){code}
@media screen and (max-width: 640px){code}

anything that is written inside the third media query (max-width: 640) will override what is written in the first one, since everything that's below 320px wide, is also below 640px wide.

So you have two choices:

1.) Turn around the order:

@media screen and (max-width: 640px){code}
@media screen and (max-width: 480px){code}
@media screen and (max-width: 320px){code}

That way, if the screen is 300px wide, it will first follow the rules from the first two queries, but then also the ones in the third query, which will override the others. That's called a desktop-first approach, since it first lists the rules for bigger (desktop) screens (above the media queries), which are then overridden by the rules for smaller devices in three steps (first maximum 640, then 480, then 320px). So a 450px wide phablet will read the rules in the first and second query (with the second overriding the first) and then stop and ignore the rules in the third media query, since it's not below 320px wide.

As an alternative:

2.) Use the media queries in ascending order, but with min-width:

@media screen and (min-width: 320px){code}
@media screen and (min-width: 480px){code}
@media screen and (min-width: 640px){code}

That's a mobile-first approach: It first lists the rules for mobile (i.e. everything that's at least 320px wide) and then goes further up. So a 360px device will stop reading the rules after the second media query, a desktop computer will read all three, and again, the rules in the third rule will overrule the ones in the first query.


Post a Comment for "Responsive CSS @media Queries"