Được rồi, tôi thấy rất nhiều thông tin sai lệch ở đây. Đối với người mới bắt đầu, việc tạo một trang web bằng một độ phân giải nhất định, ví dụ 800x600, làm cho trang đó hiển thị đúng chỉ bằng độ phân giải đó! Khi cùng một trang được hiển thị trên máy tính xách tay của người khác hoặc màn hình PC tại nhà, trang đó sẽ được hiển thị bằng độ phân giải hiện tại của màn hình đó, KHÔNG phải độ phân giải bạn đã sử dụng khi thiết kế trang. Đừng tạo các trang web cho một độ phân giải cụ thể! Có quá nhiều tỷ lệ khung hình và độ phân giải màn hình khác nhau để mong đợi một kịch bản "một kích thước phù hợp với tất cả", với thiết kế web không tồn tại. Đây là giải pháp: Sử dụng CSS3 Media Queries để tạo mã có thể điều chỉnh độ phân giải. Đây là một ví dụ:
@media screen and (max-width: 800px) {
styles
}
@media screen and (max-width: 1024px) {
styles
}
@media screen and (max-width: 1280px) {
styles
}
Hãy xem, những gì chúng ta vừa làm là chỉ định 3 bộ kiểu kết xuất ở các độ phân giải khác nhau. Trong trường hợp ví dụ của chúng tôi, nếu độ phân giải của màn hình lớn hơn 800px, CSS cho 1024 sẽ được thực thi thay thế. Tương tự, nếu màn hình hiển thị nội dung là 1224px, 1280 sẽ được thực thi kể từ 1224 lớn hơn 1024. Trang web tôi đang làm việc hiện có chức năng ở mọi độ phân giải 800x600 đến 1920x1080. Một lưu ý khác là không phải tất cả các màn hình có cùng độ phân giải đều có cùng kích thước màn hình. Bạn có thể đặt 15,4 máy tính xách tay cạnh nhau, trong khi cả hai trông giống nhau, cả hai đều có độ phân giải khác nhau đáng kể, vì không phải tất cả các pixel đều có cùng kích thước trên các màn hình LCD khác nhau. Vì vậy, hãy sử dụng truy vấn phương tiện và bắt đầu tạo trang web của bạn bằng màn hình máy tính xách tay với độ phân giải cao, đặc biệt là 1280+. Cũng thế, tạo mỗi truy vấn phương tiện bằng một độ phân giải khác nhau trên máy tính xách tay của bạn. Bạn có thể sử dụng cài đặt độ phân giải của mình trong Windows để điều chỉnh xuống 800x600 và tạo truy vấn phương tiện ở độ phân giải đó, sau đó chuyển sang 1024x768 và tạo một truy vấn phương tiện khác tại độ phân giải đó. Tôi có thể tiếp tục, nhưng tôi nghĩ các bạn nên hiểu rõ.
CẬP NHẬT: Đây là một liên kết để sử dụng các truy vấn phương tiện sẽ giúp giải thích thêm,
Thiết kế web sáng tạo cho các thiết bị di động với Truy vấn phương tiện
Hướng dẫn đó sẽ chỉ cho bạn cách thiết kế cho tất cả các thiết bị. Ngoài ra còn có hướng dẫn cho Truy vấn truyền thông cụ thể. Tôi đã phát triển toàn bộ trang web để hiển thị trên tất cả các thiết bị, tất cả màn hình và tất cả các độ phân giải không sử dụng tên miền phụ và chỉ CSS! Tôi vẫn đang làm việc trên hỗ trợ cho máy tính bảng và điện thoại thông minh. Trang web hiển thị hoàn hảo trên mọi máy tính xách tay hoặc TV LCD 50 inch của bạn và nhiều trang hoạt động hoàn hảo trên tất cả các thiết bị di động. Nếu bạn đặt tất cả mã của mình lên trang, thì các trang của bạn sẽ tải nhanh lên! Ngoài ra, hãy chắc chắn chú ý thảo luận trong bài viết đó về CSS "kích thước nền: bìa;" hoặc "chứa" các thuộc tính, chúng sẽ làm cho đồ họa nền của bạn trôi chảy và có thể hiển thị hoàn hảo ở mọi độ phân giải.
Thực hiện theo các hướng dẫn trang web và bạn có thể tạo một trang web duy nhất hiển thị mọi thứ và mọi thứ!