/*Ipad ngang(1024 x 768)*/
@media screen and (max-width: 1024px){
}
/*Ipad dọc(768 x 1024)*/
@media screen and (max-width: 768px){
}
/*Tablet nhỏ(480 x 640)*/
@media screen and (max-width: 480px){
}
/*Iphone(480 x 640)*/
@media screen and (max-width: 320px){
}
/*Smart phone nhỏ*/
@media screen and (max-width: 240px){
}
Khi sử dụng cấu trúc max-width, để hoạt động đúng thì cần sắp xếp màn hình từ to xuống nhỏ, nếu sắp xếp không đúng thứ tự sẽ gây ra áp dụng sai.
Nguồn https://viblo.asia/p/gioi-thieu-ve-media-css-trong-responsive-4dbZNDEL5YM