Kích thước các loại màn hình phổ biến trong lập trình responsive

/* Smartphones (portrait and landscape) ----------- */
@media only screenand (min-device-width:320px)and (max-device-width:480px) {
	/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screenand (min-width:321px) {
	/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screenand (max-width:320px) {
	/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screenand (min-device-width:768px)and (max-device-width:1024px) {
	/* Styles */
}
/* iPads (landscape) ----------- */
@media only screenand (min-device-width:768px)and (max-device-width:1024px)and (orientation:landscape) {
	/* Styles */
}
/* iPads (portrait) ----------- */
@media only screenand (min-device-width:768px)and (max-device-width:1024px)and (orientation:portrait) {
	/* Styles */
}
/* Desktops and laptops ----------- */
@media only screenand (min-width:1224px) {
	/* Styles */
}
/* Large screens ----------- */
@media only screenand (min-width:1824px) {
	/* Styles */
}
/* iPhone 4 - 5s ----------- */
@mediaonly screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min-device-pixel-ratio:1.5) {
	/* Styles */
}
/* iPhone 6 ----------- */
@mediaonly screen and (max-device-width:667px)only screen and (-webkit-device-pixel-ratio:2) {
	/* Styles */
}
/* iPhone 6+----------- */
@mediaonly screen and (min-device-width:414px)only screen and (-webkit-device-pixel-ratio:3) {
	/*** You've spent way too much on a phone ***/
}
/* Samsung Galaxy S7 Edge ----------- */
@media only screenand (-webkit-min-device-pixel-ratio:3)and (min-resolution:192dpi)and max-width:640px) {
	background-image:url('https: //i.ytimg.com/vi/zhBxfNm3rJE/maxresdefault.jpg');
}

3. Minh họa các loại màn hình theo kích thước