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.