horizontal-viewport-segments

Khả dụng hạn chế

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

Tính năng media horizontal-viewport-segments trong CSS phát hiện xem thiết bị có một số lượng phân đoạn viewport cụ thể được bố trí theo chiều ngang (cạnh nhau) hay không.

Liên quan đến Viewport Segments API, tính năng vertical-viewport-segments có thể được dùng để tạo thiết kế responsive hoạt động tốt trên các thiết bị đa viewport — thiết bị có màn hình được chia thành các phân đoạn viewport riêng biệt về mặt logic, chẳng hạn như thiết bị gập hoặc thiết bị có bản lề.

Cú pháp

Tính năng horizontal-viewport-segments được xác định bởi giá trị <integer> từ 1 trở lên, đại diện cho số lượng phân đoạn viewport nằm ngang mà thiết bị có.

Giá trị sẽ là 1 trong các trường hợp:
- Thiết bị không có khả năng gập (ví dụ: điện thoại thông minh hoặc máy tính bảng màn hình đơn thông thường)
- Thiết bị gập đang ở trạng thái mở hoàn toàn hoặc đóng lại (ở tư thế thiết bị continuous).
- Thiết bị hai màn hình có bản lề hoặc thiết bị gập đang ở trạng thái gập và định hướng dọc sao cho các phân đoạn nằm chồng lên nhau.
Giá trị sẽ là 2 đối với thiết bị hai màn hình có bản lề hoặc thiết bị gập đang ở trạng thái gập (ở tư thế thiết bị folded) và định hướng ngang sao cho các phân đoạn nằm cạnh nhau.
Giá trị có thể lớn hơn 2 đối với thiết bị gập có nhiều hơn một nếp gập.

Ví dụ

Sử dụng cơ bản `horizontal-viewport-segments`

Trong đoạn mã này, chúng ta sử dụng media query horizontal-viewport-segments để xử lý trường hợp thiết bị gập có các phân đoạn nằm cạnh nhau.

Chúng ta đặt container bên trái có chiều rộng bằng chiều rộng phân đoạn bên trái (env(viewport-segment-width 0 0)), và container bên phải có chiều rộng bằng chiều rộng phân đoạn bên phải (env(viewport-segment-width 1 0)).

Để tính toán chiều rộng phần gập ở giữa, chúng ta lấy offset cạnh trái của container bên phải trừ đi offset cạnh phải của container bên trái (calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));).

css

.wrapper {
  height: 100%;
  display: flex;
}

@media (horizontal-viewport-segments: 2) {
  .wrapper {
    flex-direction: row;
  }

  .list-view {
    width: env(viewport-segment-width 0 0);
  }

  .fold {
    width: calc(
      env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0)
    );
    background-color: black;
    height: 100%;
  }

  .detail-view {
    width: env(viewport-segment-width 1 0);
  }
}

Xem demo Viewport segment API để có bản demo hoạt động đầy đủ (mã nguồn). Cũng hãy xem Sử dụng Viewport Segments API để biết giải thích demo đầy đủ.