Làm cách nào để tạo css toàn màn hình?
.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à 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
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ìnhNà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 ( 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
Vì vậy, giả sử chúng ta muốn đưa nội dung bên trong phần tử 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
Chúng ta có thể chọn phần tử con của các phần tử toàn màn hìnhTươ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ử 3 đó________số 8_______Bí quyết, Thuật, mẹo. Chỉ tạo kiểu khi không ở chế độ toàn màn hìnhVà 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ả 6
hỗ trợ trình duyệtMộ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ư 7 trong Internet Explorer 111 Được hỗ trợ là 72 Được hỗ trợ dưới dạng 9 trong Firefox 9-633 Được hỗ trợ dưới dạng 0 trong Chrome 15-704 Được hỗ trợ dưới dạng 0 trong Safari 6+5 Được hỗ trợ dưới dạng 0 trong Opera 15-57+Thử nghiệmBả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 Lớp giả 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
Đ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ả
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 |