Tạo hiển thị toàn màn hình với chỉ 1 dòng CSS

Các trang web hiện đại ngày nay đang sử dụng cách làm các phần hiển thị toàn màn hình trên trang chủ của họ.

Nếu chúng không làm toàn màn hình thì cũng làm cho nó chiếm ít nhất 80% - 90% của chiều rộng.

Việc này cần thời gian phát triển và rất nhiều code javascript.

Mục lục:

Ví dụ về trang web hiển thị toàn màn hình.

1. Spotify

2. Exposure

3. Nimber

4. Flickr

Cách tạo hiển thị toàn màn hình bằng 1 dòng CSS

Để cung cấp cho bạn một ví dụ về những gì tôi đang nói đây tôi sẽ dẫn chứng các trang web đang sử dụng cách bố trí này.

Ví dụ về trang web hiển thị toàn màn hình.

1. Spotify

Spotify đang là dịch vụ stream nhạc có số lượng người dùng áp đảo nhất trên toàn cầu. Và họ đang sử dụng cách làm toàn màn hình này.

Trang web Softify hiển thị Full màn hình

Họ sử dụng các thuộc tính dữ liệu để lưu trữ tỷ lệ chiều cao ví dụ data-autosize = "0.6" và sau đó đặt chiều cao của mỗi phần với javascript.

2. Exposure

Trang web của Exposure

Exposure giữ chiều cao khoảng 90% cố định cho phần đầu trang và thay đổi height bằng javascript khi được xem trên các thiết bị có kích thước màn hình khác nhau.

3. Nimber

Trang web của Nimber

Nimber sử dụng một kỹ thuật tương tự như spotify. Chiều cao được đặt bằng javascript là 90% nhưng cũng giữ chiều cao tối thiểu tối thiểu để đảm bảo rằng các phần cao hơn khung nhìn, thường là trên điện thoại di động, sẽ được hiển thị chính xác.

4. Flickr

Trang web Flickr

Yahoo đã tung ra hồi đầu năm phiên bản toàn màn hình của flickr, đặt chiều cao của mỗi phần lên 100% và chúng cũng được thay thế bằng một con số giả định.

Tất cả các ví dụ trước đó đang sử dụng javascript để đạt được bố cục này, nhưng liệu chỉ bằng CSS thuần có làm được như vậy? Các trình duyệt hiện tại có hỗ trợ không?

Cách tạo hiển thị toàn màn hình bằng 1 dòng CSS

Bạn sẽ cảm thấy thế nào nếu chúng ta có thể làm nó chỉ với 1 dòng CSS ...

.section { height: 100vh; }

Vâng, chính nó, giá trị 1vh = 1%  chiều cao của trình duyệt.

Thật đơn giản phải không nào, trình duyệt biết rõ chiều cao khung nhìn của bạn tại mọi thời điểm vì thế bạn có thể thoải mái sử dụng nó.

Tôi đã thực hiện một đoạn demo code sử dụng phương pháp này và dường như nó làm việc hoàn hảo cả sau khi một số trình duyệt thay đổi kích thước.

Phương pháp CSS này rất mạnh, bởi vì bạn có thể kết hợp vô vàn bố cục.

Có phải bạn đang thắc mắc về phần đầu chỉ hiển thị khoảng 90% không? Đó là để tạo cảm giác trang của bạn liên tục, nối từ phần này sang phần kia.

Nếu thích như vậy thì bạn cần thêm một dòng nữa

.section { height: 100vh;}
.section—first { height: 90vh; }

Nó có vẻ quá tốt được sử dụng rộng rãi, không thể nói những nhược điểm của kỹ thuật này là gì và tại sao bạn nên hoặc không nên sử dụng.

Nhưng bạn có thể tự mình thử nghiệm nếu phù hợp với nhu cầu của bạn.

Các trình duyệt hỗ trợ tính năng thiết lập full màn hình bằng CSS

Các trình duyệt hỗ trợ tính năng viewport units

Đó là một cách tiếp cận khác để giải quyết vấn đề toàn màn hình với các ưu và khuyết điểm khác nhau, nhưng là một ví dụ tuyệt vời mà cần bất kỳ đoạn JS nào.

Tôi rất muốn nghe ý kiến của bạn về cách tạo hiển thị toàn màn hình với chỉ 1 dòng CSS này. Hãy để lại comment bên dưới đây.