Những thay đổi

Lưu ý rằng việc thiếu tính <meta name="viewport" content="width=device-width, initial-scale=1">năng này sẽ vô hiệu hóa khía cạnh thu phóng của các trang web trong thiết bị di động. Ngoài ra, chúng tôi đã đặt lại chiều rộng của vùng chứa của mình và thay đổi thanh điều hướng để ngăn chặn việc sụp đổ và về cơ bản là tốt.

Về thanh điều hướng

Lưu ý, thành phần thanh điều hướng khá phức tạp ở đây là các kiểu hiển thị nó khá cụ thể và chi tiết. Ghi đè để đảm bảo hiển thị kiểu máy tính để bàn không hiệu quả hoặc kiểu dáng đẹp như mong muốn. Chỉ cần lưu ý rằng có thể có các lỗi tiềm ẩn khi bạn xây dựng trên ví dụ này khi sử dụng thanh điều hướng.

Trình duyệt, cuộn và các phần tử cố định

Bố cục không đáp ứng làm nổi bật một nhược điểm chính đối với các yếu tố cố định. Bất kỳ thành phần cố định nào, chẳng hạn như thanh điều hướng cố định, sẽ không thể cuộn được khi chế độ xem trở nên hẹp hơn nội dung trang. Nói cách khác, với chiều rộng vùng chứa không đáp ứng là 970px và cửa sổ xem là 800px, bạn sẽ có khả năng ẩn 170px nội dung.

Không có cách nào để giải quyết vấn đề này vì đó là hành vi mặc định của trình duyệt. Giải pháp duy nhất là bố cục đáp ứng hoặc sử dụng phần tử không cố định.

Hệ thống lưới không đáp ứng

Một phần ba
Một phần ba
Một phần ba