2

What are the (standard) numbers to work with, when making css responsive layout?

@media screen and (min-width: px) {
    /* Mobile */
}
@media screen and (min-width: px) {
    /* Tablet */
}
@media screen and (min-width: px) {
    /* Desktop */
}

And

@media screen and (max-width: px) {
    /* Mobile */
}
@media screen and (max-width: px) {
    /* Tablet */
}
@media screen and (max-width: px) {
    /* Desktop */
}
  • Why you don't use a responsive HTML5/CSS3 FrameWork like Twitter's Bootstrap? – alessadro Jan 11 '17 at 21:34
  • @alessadro I can, but I want to do it this way. – Steve Jan 11 '17 at 21:35
  • 1
    Well, check out this link, there are more than you think, if you want be specific by devices (maybe you want it, because you are doing from scratch)> css-tricks.com/snippets/css/media-queries-for-standard-devices – alessadro Jan 11 '17 at 21:38
2

Material design has a very complete section on Responsive UI layouts with numbers.

According to it the screen sizes in dp would go:

  • xsmall: 0 - 600
  • small: 600 - 960
  • medium: 960 - 1280
  • large: 1280 - 1920
  • xlarge: 1920+

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.