i want to design a web site.but tell me what are the sizes i can use for responsive website design.
that sizes must contain for mobile,tablets,pcs and other devices..
i want to use them in media queries.. :D
EX for Mobile:
@media only screen and (min-width: 500px) {
}
EX for Tablet:
@media only screen and (min-width: 800px) {
}
Give me some resources that you have about responsive website design and about the sizes which i can use for responsive website design .. :D
like that i want to know what are the reals sizes for these devices that i can use. :D
/* #1- Desktops */
@media (min-width: 980px) { ... }
/* #2- Portrait tablet to landscape and netbooks */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* #3- Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
/* #4- Landscape phones and down */
@media (max-width: 480px) { ... }
For actual device specifications, check out this link by CSS-tricks..
Here is the full list of media breakpoints
@media all and (max-width: 1690px) { ...}
@media all and (max-width: 1280px) { ...}
@media all and (max-width: 980px) { ... }
@media all and (max-width: 736px) { ... }
@media all and (max-width: 480px) { ... }
Check out for more informations about responsive device sizes : Medium
I hope so it's will help.
