Cập nhật kích thước màn hình làm responsive cho website

Bài viết này mình sẽ cập nhật lại danh sách các kích thước màn hình thông dụng bạn có thể dùng trong khi làm responsive cho trang web. Đối với những màn hình có độ phân giải lớn thì bạn có thể lựa chọn thiết kế cho các khối hiển thị theo % chiều rộng của màn hình.

Kích thước màn hình làm responsive cho website

Để làm được responsive cho một trang web thì bạn phải hiểu qua cách hoạt động của thuộc tính media trong css. Bạn có thể xem thêm bài viết giới thiệu về media types trên trang chủ của w3.org. Có 2 kiểu bạn có thể áp dụng làm responsive, bạn có thể chọn kích thước bắt đầu từ màn hình nhỏ đến lớn, hoặc từ màn hình lớn đến nhỏ.

@media only screen and (max-width: 1403px) {

}

@media only screen and (max-width: 1240px) {

}

@media only screen and (max-width: 1100px) {

}

@media only screen and (max-width: 1024px) {

}

@media only screen and (max-width: 980px) {

}

@media only screen and (max-width: 955px) {

}

@media only screen and (max-width: 880px) {

}

@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: 740px) {

}

@media only screen and (max-width: 720px) {

}

@media only screen and (max-width: 640px) {

}

@media only screen and (max-width: 620px) {

}

@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: 360px) {

}

@media only screen and (max-width: 338px) {

}

@media only screen and (max-width: 330px) {

}

@media only screen and (max-width: 320px) {

}

@media print {

}

Bên trên là danh sách các kích thước màn hình có độ rộng từ 320px đến 1403px. Bạn có thể bổ sung thêm css cho trang in bằng cách dùng thuộc tính @media print.

Với những kích thước màn hình như trên, bạn có thể thêm vào danh sách preset của Firefox để tiện cho việc lập trình.

[{"key":"320x590","width":320,"height":590},{"key":"330x590","name":"","width":330,"height":590},{"key":"338x590","name":"","width":338,"height":590},{"key":"360x590","name":"","width":360,"height":590},{"key":"480x590","name":"","width":480,"height":590},{"key":"534x590","name":"","width":534,"height":590},{"key":"549x590","name":"","width":549,"height":590},{"key":"563x590","name":"","width":563,"height":590},{"key":"568x590","name":"","width":568,"height":590},{"key":"600x590","name":"","width":600,"height":590},{"key":"620x590","name":"","width":620,"height":590},{"key":"640x590","name":"","width":640,"height":590},{"key":"720x590","name":"","width":720,"height":590},{"key":"740x590","name":"","width":740,"height":590},{"key":"768x590","name":"","width":768,"height":590},{"key":"780x590","name":"","width":780,"height":590},{"key":"800x590","name":"","width":800,"height":590},{"key":"880x590","name":"","width":880,"height":590},{"key":"955x590","name":"","width":955,"height":590},{"key":"980x590","name":"","width":980,"height":590},{"key":"1024x590","name":"","width":1024,"height":590},{"key":"1100x590","name":"","width":1100,"height":590},{"key":"1240x590","name":"","width":1240,"height":590},{"key":"1403x590","name":"","width":1403,"height":590}]

Các preset bên trên với chiều cao màn hình là 590px, do màn hình của mình nhỏ nên mình để 590 cho dễ sử dụng, bạn có thể thay đổi lại thành con số cho phù với màn hình máy tính bạn đang dùng. Với những thông tin cơ bản này, hy vọng nó có thể giúp ích cho bạn trong quá trình làm website tương thích với thiết bị di động, chúc bạn thành công.

Gửi bình luận của bạn

Gửi bình luận

Địa chỉ email của bạn sẽ được giữ bí mật. Những mục bắt buộc được đánh dấu *