Làm cách nào để tạo css toàn màn hình?

Click the button below to enter the element into fullscreen mode.

I change color in fullscreen mode!


Go Full Screen!

.container {
  margin: 40px auto;
  max-width: 700px;
}

.element {
  padding: 20px;
  height: 300px;
  width: 100%;
  background-color: skyblue;
  box-sizing: border-box;
}

.element p {
  text-align: center;
  color: white;
  font-size: 3em;
}

.element:-ms-fullscreen p {
  visibility: visible;
}

.element:fullscreen {
  background-color: #e4708a;
  width: 100vw;
  height: 100vh;
}

Thật không may, bạn vẫn kết thúc với một div không có kích thước hoàn hảo cho toàn màn hình của mình. Khi bạn sử dụng tỷ lệ phần trăm trong CSS, mã sẽ cố gắng nắm bắt kích thước của phần tử gốc, ở đây là body, nhưng nó không được xác định theo mặc định, vì vậy bạn sẽ nhận được một thứ gì đó không hoàn hảo

Tin vui là có một thuộc tính cụ thể mà chúng ta có thể sử dụng để làm cho div toàn màn hình trong CSS

Kích thước khung nhìn phụ thuộc vào kích thước của toàn màn hình. Khi chiều cao hoặc chiều rộng của màn hình thay đổi, mọi thứ sẽ được thu nhỏ lại cho phù hợp. Có 4 đơn vị mà chúng tôi có thể sử dụng với chế độ xem

Lớp giả CSS :fullscreen cho phép bạn chọn và tạo kiểu cho bất kỳ phần tử nào hiện đang ở chế độ toàn màn hình. Bạn có biết những lần bạn cho phép một hình ảnh hoặc một số thành phần khác chiếm toàn màn hình không?

.element:fullscreen {
  font-size: 3em;
  text-align: center;
}

Và, trong những trường hợp có nhiều phần tử ở chế độ toàn màn hình, thao tác này sẽ chọn tất cả các phần tử đó

Chế độ toàn màn hình và API toàn màn hình

Này, đầu to lên đây. Có một sự khác biệt giữa việc đặt ứng dụng của bạn ở chế độ toàn màn hình ở cấp hệ điều hành và tạo một phần tử ở chế độ toàn màn hình. Nếu bạn chuyển sang chế độ toàn màn hình của trình duyệt (+CMD+_______25_______ trên MacOS,

let element = document.querySelector(".element");

element.requestFullscreen();
0 trên Windows) và bạn chọn một thành phần bằng cách sử dụng :fullscreen, thì thành phần đó sẽ không khớp với thành phần đó. Thay vào đó, một phần tử khớp với :fullscreen khi nó chuyển sang chế độ toàn màn hình bằng API toàn màn hình

let element = document.querySelector(".element");

element.requestFullscreen();

Vì vậy, giả sử chúng ta muốn đưa nội dung bên trong phần tử

let element = document.querySelector(".element");

element.requestFullscreen();
3 vào giữa khung nhìn khi nó ở chế độ toàn màn hình. Chúng tôi nhắm mục tiêu nó với :fullscreen, sau đó tạo kiểu cho phù hợp

section:fullscreen {
  display: flex;
  align-items: center;
  justify-content: center;
}

Chúng ta có thể chọn phần tử con của các phần tử toàn màn hình

Tương tự, chúng ta có thể chọn phần tử con của một phần tử được chọn ở chế độ toàn màn hình, chẳng hạn như các đoạn văn trong phần tử

let element = document.querySelector(".element");

element.requestFullscreen();
3 đó

________số 8_______

Bí quyết, Thuật, mẹo. Chỉ tạo kiểu khi không ở chế độ toàn màn hình

Và nếu chúng ta chỉ muốn áp dụng các kiểu khi phần tử không ở chế độ toàn màn hình, chúng ta có thể sử dụng nó cùng với lớp giả

let element = document.querySelector(".element");

element.requestFullscreen();
6

section:not(:fullscreen) {
  background: #eee;
}

hỗ trợ trình duyệt

Một số trình duyệt cũ hơn có thể cần tiền tố nhà cung cấp, chẳng hạn như

let element = document.querySelector(".element");

element.requestFullscreen();
7 trong Internet Explorer 11

IEEdgeFirefoxChromeSafariOpera11 1All64 271 36 458 5Android Chrome Android Firefox Trình duyệt AndroidiOS SafariOpera MobileAllNo91No62 Nguồn. chó săn

1 Được hỗ trợ là
let element = document.querySelector(".element");

element.requestFullscreen();
7
2 Được hỗ trợ dưới dạng
let element = document.querySelector(".element");

element.requestFullscreen();
9 trong Firefox 9-63
3 Được hỗ trợ dưới dạng
section:fullscreen {
  display: flex;
  align-items: center;
  justify-content: center;
}
0 trong Chrome 15-70
4 Được hỗ trợ dưới dạng
section:fullscreen {
  display: flex;
  align-items: center;
  justify-content: center;
}
0 trong Safari 6+
5 Được hỗ trợ dưới dạng
section:fullscreen {
  display: flex;
  align-items: center;
  justify-content: center;
}
0 trong Opera 15-57+

Thử nghiệm

Bản demo sau đây cho thấy cách chúng ta có thể kiểm soát nền của thành phần hình ảnh ở chế độ toàn màn hình. Nhấp vào nút để chuyển đổi chế độ toàn màn hình cho hình ảnh và xem các kiểu toàn màn hình có hiệu lực

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

Lớp giả :fullscreen cho phép bạn định cấu hình biểu định kiểu của mình để tự động điều chỉnh kích thước, kiểu hoặc bố cục của nội dung khi các thành phần chuyển đổi qua lại giữa toàn màn hình và bản trình bày truyền thống

Trong ví dụ này, màu của một nút được thay đổi tùy thuộc vào việc tài liệu có ở chế độ toàn màn hình hay không. Điều này được thực hiện mà không cần áp dụng cụ thể các thay đổi kiểu bằng JavaScript

HTML của trang trông như thế này

<h1>MDN Web Docs Demo: :fullscreen pseudo-classh1>

<p>
  This demo uses the <code>:fullscreencode> 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 Fullscreenbutton>

Điều kỳ diệu xảy ra trong CSS. Có hai quy tắc ở đây. Đầu tiên thiết lập màu nền của nút "Chuyển đổi chế độ toàn màn hình" khi phần tử không ở trạng thái toàn màn hình. Điều quan trọng là việc sử dụng ________ 33 _______, tìm kiếm phần tử không áp dụng lớp giả :fullscreen cho nó

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

Khi tài liệu ở chế độ toàn màn hình, thay vào đó, CSS sau sẽ áp dụng, đặt màu nền thành màu đỏ nhạt