Phần toàn màn hình CSS

Các trang web hiện đại ngày nay đang có các phần toàn màn hình trên trang chủ của họ. Nếu chúng không ở chế độ toàn màn hình, thì chúng chiếm ít nhất 80–90% phần trăm bất động sản và điều đó cần thời gian phát triển cũng như rất nhiều mã javascript

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

www. spotify. com
Họ sử dụng thuộc tính dữ liệu để lưu trữ tỷ lệ chiều cao cũ. data-autosize=”0. 6" và sau đó đặt chiều cao của từng phần bằng javascript.

www. Phơi bày. co
Phơi sáng giữ cố định 90% chiều cao cho phần đầu và thay đổi chiều cao bằng javascript khi thay đổi kích thước.

www. dẻo dai hơn. com
Nimber sử dụng một kỹ thuật tương tự như spotify. Chiều cao được đặt bằng javascript thành 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 chế độ xem, thường là trên thiết bị di động, sẽ được hiển thị chính xác.

và dĩ nhiên…

www. flickr. com
Yahoo đã ra mắt phiên bản flickr toàn màn hình vào đầu năm nay, đặt chiều cao của mọi phần thành 100% và họ cũng thay thế thao tác cuộn bằng cuộn nhân tạo. Đây là bài viết về cách nó được thực hiện.

Tất cả các ví dụ trước đều sử dụng javascript để đạt được bố cục này, nhưng điều gì sẽ xảy ra nếu chúng ta có thể thực hiện điều đó bằng CSS thuần túy, thứ cũng được hỗ trợ từ nhiều trình duyệt hiện đại?

Điều gì sẽ xảy ra nếu chúng ta có thể tạo ra nó chỉ với 1 dòng CSS…

phần { chiều cao. 100vh;

Có, chiều cao khung nhìn, 1vh = 1% chiều cao của trình duyệt.
Không cần bất kỳ nỗ lực nào, chiều cao của khung nhìn biết từng khoảnh khắc về chiều cao của trình duyệt của bạn và có thể đặt chiều cao đó cho phần của bạn một cách phù hợp. Tôi đã tạo một codepen sử dụng phương pháp này và dường như hoạt động hoàn hảo sau khi một số trình duyệt thay đổi kích thước mà tôi đã thử.

Xem mã tại đây. Kiểm tra bản trình diễn

Phương pháp này rất hiệu quả, bởi vì bạn có thể tạo ra vô số tổ hợp bố cục. Giả sử bạn muốn tất cả các phần có chiều cao 100% nhưng chỉ phần đầu tiên là 90%, để tạo cảm giác liên tục, không sao cả. Những gì bạn cần lại là một dòng nữa

.section { height: 100vh;}
. phần đầu tiên { chiều cao. 90vh;

Trình duyệt hỗ trợ rất tốt được 78. 38% trên caniuse. com, với sự hỗ trợ của IE9+, hãy xem

Nó có vẻ quá tốt để trở thành sự thật và không có thử nghiệm 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ể dùng thử và tự mình xem nếu phù hợp với nhu cầu của bạn. Bạn có thể sao lưu các trình duyệt bị lỗi bằng một số javascript tùy chỉnh hoặc tìm một polyfill thực hiện công việc cho bạn

Và cuối cùng nhưng không kém phần quan trọng, tôi phải đề cập đến một ví dụ cuối cùng sử dụng phân đoạn khá tốt, chỉ với CSS, bằng cách sử dụng một cách tiếp cận hơi khác

www. 6wunderkinder. com
Những người từ wunderlist sử dụng tiêu đề có vị trí cố định, cung cấp tùy chọn đặt chiều cao hoàn hảo. 100% phần của họ. Đó là một cách tiếp cận hơi khác với những ưu và nhược điểm khác nhau, nhưng là một ví dụ tuyệt vời mà không cần bất kỳ js nào☺

Đó là một khoảnh khắc AHA trong CSS và tôi rất muốn đọc suy nghĩ của bạn về phương pháp này. Đăng ghi chú của bạn ở đây hoặc tweet cho tôi @ckor

Tìm hiểu cách tạo ảnh nền bao phủ toàn bộ cửa sổ trình duyệt. Ví dụ sau đây hiển thị hình nền phản hồi toàn màn hình (và nửa màn hình)

Demo - Ảnh nền toàn trang

Demo - Ảnh nền nửa trang

Cách tạo một hình ảnh có chiều cao đầy đủ

Sử dụng phần tử vùng chứa và thêm hình nền vào vùng chứa với height: 100%. Mẹo. Sử dụng 50% để tạo ảnh nền nửa trang. Sau đó, sử dụng các thuộc tính nền sau để căn giữa và chia tỷ lệ hình ảnh một cách hoàn hảo

Ghi chú. Để đảm bảo rằng hình ảnh bao phủ toàn bộ màn hình, bạn cũng phải áp dụng height: 100% cho cả hai và

Lớp giả CSS :fullscreen khớp với mọi phần tử hiện đang ở chế độ toàn màn hình. Nếu nhiều phần tử đã được đưa vào chế độ toàn màn hình, điều này sẽ chọn tất cả chúng

:fullscreen

<h1>MDN Web Docs Demo: :fullscreen pseudo-class</h1>

<p>
  This demo uses the <code>:fullscreen</code> pseudo-class to automatically
  change the style of a button used to toggle fullscreen mode on and off,
  entirely using CSS.
</p>

<button id="fs-toggle">Toggle Fullscreen</button>

#fs-toggle:not(:fullscreen) {
  background-color: #afa;
}