Polyfill paparan CSS dilipat

Telefon yang boleh dilipat mendapat daya tarikan, walaupun masih dalam peringkat awal mereka. Beberapa model sudah tersedia, semuanya dilengkapi dengan pelayar web. Pereka Web perlu memahami lokasi lipat untuk membuat reka bentuk responsif yang lancar menyesuaikan diri dengan bahagian atas dan bawah (atau kiri dan kanan) halves¹.

Fungsi ini nampaknya dilaksanakan melalui pemalar env() , sama seperti bagaimana notch skrin ditangani.

Contoh Polyfill menggunakan CSS berikut:

 @media (merangkumi: satu kali ganda-vertikal) {
  badan {
    Flex-arah: baris;
  }
  .map {
    Flex: 1 1 env (lipat-kiri);
  }
  .locations-list {
    Flex: 1;
  }
}

Pendekatan alternatif boleh:

 @media (merangkumi: satu kali ganda-vertikal) {
  .page-wrap {
    paparan: grid;
    Grid-template-lajur: env (lipat-kiri) 1FR;
  }
}

Ketiadaan fold-right patut diberi perhatian. Memandangkan trend semasa ke arah sifat logik, fold-inline-start mungkin pilihan yang lebih sesuai.

1. Kaitan jangka panjang pernyataan ini masih dapat dilihat. Telefon dilipat masa depan mungkin menggabungkan pelbagai segmen skrin.

Atas ialah kandungan terperinci Polyfill paparan CSS dilipat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!