Sử dụng @media screen min-width và max-width để Media CSS trong Responsive

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