Giới thiệu về bố cục cho các màn hình khác nhau trong CSS

Trong thế giới hiện đại, một trang web phải hiển thị tốt trên các thiết bị có kích thước màn hình khác nhau.

Thông thường, các thiết bị được chia thành bốn loại: máy tính để bàn (desktop), máy tính xách tay, máy tính bảng (tablet) và điện thoại di động (mobile).

Trước đây, trong thời xa xưa, các kích thước màn hình phổ biến của tất cả các thiết bị đều đã biết, may mắn là không có quá nhiều. Và các trang web được tạo ra để chúng hiển thị chính xác trên danh sách độ phân giải đã biết.

Hiện nay, số lượng thiết bị đã trở nên rất nhiều, đến mức không thể lập một danh sách độ phân giải để thiết kế trang web cho phù hợp. Bây giờ người ta cho rằng, bố cục phải hiển thị chính xác trên màn hình có bất kỳ kích thước nào.

Điều này đạt được bằng cách sắp xếp lại các khối tại các điểm then chốt của bố cục. Và những điểm then chốt này được chọn không phải cho các thiết bị cụ thể, mà cho nội dung của trang web - sao cho nội dung trông đẹp mắt.

Giữa các điểm then chốt, chiều rộng của các phần tử trang web phải linh hoạt, để nó điều chỉnh theo chiều rộng của màn hình. Còn tại các điểm then chốt, việc sắp xếp lại các khối vào các vị trí khác diễn ra.

Bố cục được mô tả được gọi là thích ứng hoặc đáp ứng (responsive). Chúng ta sẽ nghiên cứu nó trong các bài học tiếp theo.