What are the best dimensions for responsive web designs [closed]

Searching through internet I found many different dimensions called proper in order to create responsive designs but I am looking for the best breakpoints specially when it comes to mobiles with small screens such as j510 (j5 2016)


Solution 1:

There is no real answer... it depends on your site, design, target.

I usually use these media queries and it is working 99% of the time:

/* for-phone-only */
@media (max-width: 599px) { }


/* for-tablet-portrait-up */
@media (min-width: 600px) { }


/* for-tablet-landscape-up */
@media (min-width: 900px) { }


/* for-desktop-up */
@media (min-width: 1200px) { }


/* for-medium-desktop-up */
@media (min-width: 1400px) { }


/* for-big-desktop-up */
@media (min-width: 1800px) { }

Caution: the media queries are mobile-first

Solution 2:

I generally use max-width: 767px for mobile, 768px to 1365px for tablet and above that is desktop.