CSS Media Queries

[KrisR]

Hi,

I'm looking into 2 CSS frameworks and learning about CSS media queries

Here are codes from Skeleton CSS responsive

@media only screen and (max-width: 959px) {}
@media only screen and (min-width: 768px) and (max-width: 959px) {}
@media only screen and (max-width: 767px) {}
@media only screen and (min-width: 480px) and (max-width: 767px) {}
@media only screen and (max-width: 479px) {}

and here it is for Bootstrap CSS responsive framework:

@media (min-width: 1200px) { ... }
@media (min-width: 768px) and (max-width: 979px) { ... }
@media (max-width: 767px) { ... }
@media (max-width: 480px) { ... }

I want to know these codes are the similar and they will work in all cases?

what is the difference? which one i should go with?

Any guides?

 

[Cynical]

From looking at that, I think they would be different. Try taking a look [URLnf="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries"]here[/URLnf]

 

[arronmattwills]

It will not make big difference in responsive design, because both are well planned and well designed frame works. But bootstrap will cover wide range of classes, design elements and layouts. Use updated version of Bootstrap or i can suggest semantic framework.

 

[PluginForage]

They are similar but one is saying if a screen use this. [URLnf="http://www.w3.org/TR/CSS2/media.html"]More about media types[/URLnf]