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ìnhlet 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ợpsection: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[];
6section: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 111 Được hỗ trợ là
let element = document.querySelector[".element"];
element.requestFullscreen[];
72 Được hỗ trợ dưới dạng
let element = document.querySelector[".element"];
element.requestFullscreen[];
9 trong Firefox 9-633 Được hỗ trợ dưới dạng
section:fullscreen {
display: flex;
align-items: center;
justify-content: center;
}
0 trong Chrome 15-704 Đượ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
MDN Web Docs Demo: :fullscreen pseudo-class
This demo uses the :fullscreen pseudo-class to automatically
change the style of a button used to toggle fullscreen mode on and off,
entirely using CSS.
Toggle Fullscreen
với ID
"fs-toggle"
sẽ thay đổi giữa màu đỏ nhạt và xanh lục nhạt 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 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