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