Khi bạn thiết kế webiste responsive thì bạn sẽ không thể kiểm soát được có bao nhiêu kích thước màn hình của các thiết bị. Chính vì thế bữa nay thinhweb chia sẻ với bạn kích thước màn hình chuẩn cho các thiết bị. Điều này giúp cho việc bạn thiết kế giao diện tùy biến responsive thuận tiện hơn cũng như không bị vỡ giao diện webiste
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 980px) {
}
@media only screen and (max-width: 800px) {
}
@media only screen and (max-width: 780px) {
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 720px) {
}
@media only screen and (max-width: 640px) {
}
@media only screen and (max-width: 600px) {
}
@media only screen and (max-width: 568px) {
}
@media only screen and (max-width: 563px) {
}
@media only screen and (max-width: 549px) {
}
@media only screen and (max-width: 534px) {
}
@media only screen and (max-width: 480px) {
}
@media only screen and (max-width: 414px) {
}
@media only screen and (max-width: 411px) {
}
@media only screen and (max-width: 375px) {
}
@media only screen and (max-width: 360px) {
}
@media only screen and (max-width: 338px) {
}
@media only screen and (max-width: 330px) {
}
@media only screen and (max-width: 320px) {
}
Ngoài ra khi bạn bạn có thể thêm các kích thước khác tùy theo cách của bạn cũng như làm sao cho nó hợp với website hơn. Cách trên khá dài nhưng bạn cũng thể viết ngắn gọn như sau
@media only screen and (min-width:360px) and (max-width: 480px) {
}
Ỹ nghĩa của cách viết gọn này là hiển thị từ màn hình 360px đến màn hình 480px.
