@media screen
/*max-width:400px - ширина экрана меньше 400px*/
/*max-width: 400px - ширина экрана больше 400px*/
/* Portrait tablets and medium desktops */
@media screen and (max-width: 1199px) {
}
/* Portrait tablets and small desktops */
@media screen and (max-width: 991px) {
}
/* Landscape phones and portrait tablets */
@media screen and (max-width: 767px) {
}
/* Landscape phones and smaller */
@media screen and (max-width: 480px) {
}
iPad горизонтальный и вертикальный режимы:
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) { ...}
iPad mini:
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1) {...}