Dapatkan Saiz Skrin dalam CSS Tulen

Kita semua tahu bahawa CSS dahulunya merupakan bahagian yang paling mencabar dalam pembangunan web. Walau bagaimanapun, ia menjadi lebih sukar pada masa kini.

Anda tidak akan percaya, tetapi kini CSS boleh mentakrifkan sifat, membuat pengiraan, dan juga mendapatkan saiz skrin secara langsung! Artikel ini akan menunjukkan kepada anda cara melakukannya.

Takrifkan Harta

Peraturan @property ialah ciri baharu dalam CSS yang membolehkan pembangun membuat sifat tersuai dan menetapkan jenis, warisan dan nilai awal mereka. Menggunakan ciri ini, kita boleh membaca nilai tertentu dan menyerahkannya kepada sifat tersuai.

Dalam contoh di bawah, kami mentakrifkan dua sifat tersuai, --w_raw dan --h_raw, masing-masing mewakili lebar dan ketinggian skrin:

@property --w_raw {
  syntax: '<length>';
  inherits: true;
  initial-value: 100vw;
}

@property --h_raw {
  syntax: '<length>';
  inherits: true;
  initial-value: 100vh;
}

• sintaks: '' menyatakan bahawa jenis harta itu ialah panjang.
• mewarisi: benar menunjukkan bahawa harta itu boleh diwarisi.
• nilai awal menetapkan nilai awal harta itu kepada 100vw dan 100vh, yang merupakan lebar dan tinggi port pandangan.

Mengeluarkan Unit

Kini, kami telah memperoleh nilai lebar dan ketinggian skrin, tetapi nilai tersebut masih termasuk unit. Bagaimanakah kita boleh mengalih keluar unit untuk mendapatkan nilai angka tulen? Ini soal matematik, jadi kita perlu menggunakan alatan matematik dalam CSS: atan2(y, x) dan tan().

• Fungsi atan2(y, x) mengembalikan sudut (dalam radian) dari paksi-x ke titik (x, y).
• Fungsi tan() mengira tangen bagi sudut tertentu.

Menggabungkan ini, kita boleh mendapatkan nilai angka tulen. Di sini, kita lulus var(--w_raw) dan 1px sebagai parameter untuk mengira sudut lebar dan kemudian menukarnya kepada nombor. Dengan cara ini, kami menukar lebar dan tinggi kepada nilai tanpa unit dan menyimpannya dalam pembolehubah :root.

:root {
  --w: tan(atan2(var(--w_raw), 1px));
  --h: tan(atan2(var(--h_raw), 1px));
}

Memaparkan Nombor

Sekarang nilai angka disimpan dalam CSS, bagaimanakah kita memaparkannya? Kaunterlah yang penting!

body::before {
  content: counter(w) 'x' counter(h);
  counter-reset: h var(--h) w var(--w);
}

Kami mencipta elemen pseudo ::before pada badan untuk memaparkan kandungan CSS.

• set semula balas memulakan pembilang h dan w dan menetapkan nilainya kepada var(--h) dan var(--w).
• kandungan: kaunter(w) "x" kaunter(h); memaparkan pembilang lebar dan ketinggian, dalam format "lebar x tinggi".

Selesai!

Kini anda mempunyai penunjuk saiz skrin yang dilaksanakan semata-mata dalam CSS.

Pelayar akan mengemas kini --w dan --h dalam masa nyata dan memaparkannya pada halaman. Keseluruhan proses adalah bebas JavaScript sepenuhnya.

Anda boleh klik di sini untuk mencuba demo dalam talian.

Atas ialah kandungan terperinci Dapatkan Saiz Skrin dalam CSS Tulen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!