CODEWITHSUNDEEP
cssmedia-queriesresponsive
user21
user21

Reputation: 1351

@media css responsive design

I have wrote the following media queries for different breakpoints in a css file. 

@media all and (max-width: 350px) {}
@media all and (min-width: 350px) and (max-width: 440px) {}
@media all and (min-width: 440px) and (max-width: 768px)  {}
@media all and (min-width: 768px) {}

Will there be conflict between the media query when the width is at 440px or 768px? Because when I test it on browser, it seems that some of the css font specified in the media queries are not pick up in the browser.

Was thinking of writing it in the following way, is the following okay or are there other way to write the media query in better way?

@media all and (max-width: 350px) {}
@media all and (max-width: 440px) {}
@media all and (max-width: 768px)  {}
@media all and (min-width: 768px) {}

Upvotes: 2

Views: 258

Answers (1)

Syed Khizaruddin
Syed Khizaruddin

Reputation: 435

there is one another way which i prefer for writing @media queries it might be not the good way but it comes handy 

@media (max-width: 780px){
    // your code here..
}

@media (max-width: 320px){
    // your code here..
}

make sure you go in descending order of max-width i.e. the higher max-width should come first then lower max-width

there must not be two @media query for same max-width if so make it one

hope so this might work for you

Upvotes: 3

Related Questions