Sunday, November 20, 2016

website design - Standard numbers for responsive layout


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 */
}

Answer



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


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...