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.
Để 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.
