Daunting with hundred of screen resolutions in Responsive Web Design?

If you apply Responsive Design you make your visitors pleased but you will be crazy in some situation. Nowadays, many devices with countless of resolutions… How we choose breakpoints for our CSS?

It cost me many hours to find out which most popular screen resolution, breakpoint for them. Luckily, I saw an article accidental, it is very simple and usefull.

From Microsoft’s website, it is said that any device we can select one in three below value:

Small (smaller than 640px)
Medium (641px to 1007px)
Large (1008px and larger)
Screen and breakpoints

So, we turn this information to CSS media query as:

@media only screen and (max-width: 640px) {
  body {
    background-color: red;
  }
}
@media only screen (min-width: 641px) and (max-width: 1007px) {
  body {
    background-color: green;
  }
}
@media only screen (min-width: 1008px) {
  body {
    background-color: blud;
  }
}

That’s all!

Leave a Reply