penukaran unit hujung hadapan web

Apabila melakukan pembangunan bahagian hadapan web, penukaran unit selalunya terlibat, seperti piksel (px), peratusan (%), unit tetingkap (vw, vh, dll.), dll. Kuasai penggunaan unit ini dan cara untuk melakukannya, penukaran unit adalah sangat penting untuk jurutera bahagian hadapan web.

Pixel (px)

Pixel (px) ialah salah satu unit yang paling biasa dan unit asas untuk kebanyakan resolusi peranti. Dalam pembangunan web, atribut gaya seperti saiz dan margin elemen biasanya ditetapkan dalam unit px. Sebagai contoh, jika kita mentakrifkan elemen div dengan lebar 300px dan ketinggian 200px, maka elemen div ini akan meliputi segi empat tepat 300*200 pada skrin.

Selain itu, unit piksel lain sering digunakan semasa proses pembangunan - piksel bebas peranti (dip atau dp) Unit ini nampaknya menyesuaikan diri dengan ketumpatan piksel peranti yang berbeza. Pada skrin peleraian tinggi, saiz paparan piksel mungkin jauh lebih besar daripada pada skrin peleraian rendah dan menggunakan celup boleh memastikan saiz yang sama kelihatan sama pada peranti dengan resolusi yang berbeza.

Peratusan (%)

Peratusan dikira berdasarkan lebar blok yang mengandungi Biasanya, menetapkan atribut seperti lebar atau tinggi sebagai peratusan boleh mencapai kesan reka letak responsif yang lebih baik. Sebagai contoh, jika kita mentakrifkan kotak dengan lebar 50%, ia akan dipaparkan secara adaptif pada separuh lebar elemen induknya.

Lihat unit tetingkap (vw, vh, dll.)

Lihat unit tetingkap biasanya dikira berdasarkan saiz tetingkap penyemak imbas Dengan menggunakan unit ini, kami boleh melaksanakan reka bentuk responsif dengan lebih baik. Apabila kami menggunakan unit vw, ia membahagikan lebar port pandangan kepada 100 unit, dan dalam CSS, vw adalah sama dengan lebar port pandangan 1/100. Sebagai contoh, jika kita menetapkan lebar elemen kepada 50vw, maka ia akan menduduki separuh daripada keseluruhan lebar viewport.

Selain itu, apabila kita menggunakan unit vh, ia akan membahagikan ketinggian viewport kepada 100 unit, sama seperti vw, vh adalah sama dengan ketinggian viewport 1/100.

Penukaran unit

Dalam pembangunan bahagian hadapan web, selalunya perlu untuk menukar antara unit yang berbeza Berikut ialah beberapa kaedah penukaran unit biasa:

1. px -> rem

rem ialah unit yang dikira relatif kepada saiz fon unsur akar (elemen html). Jika kita ingin menukar px kepada rem, kita perlu membahagikan saiz piksel elemen tersebut terlebih dahulu dengan saiz fon elemen akar. Sebagai contoh, jika saiz fon elemen akar ialah 16px dan lebar elemen ialah 160px, maka nilai remnya ialah 10rem.

2. px -> em

em ialah unit yang dikira relatif kepada saiz fon elemen semasa. Anda biasanya boleh menetapkan saiz fon keseluruhan halaman web kepada 1em, dan kemudian menetapkan saiz elemen sebagai peratusan berbanding dengan saiz fon halaman web. Contohnya, jika saiz fon web ialah 16px dan lebar elemen ialah 80px, maka nilai emnya ialah 5em.

3. px -> Peratus (%)

Jika kita ingin menukar saiz piksel elemen kepada peratusan, kita perlu membahagikan saiz piksel elemen olehnya terlebih dahulu Mengandungi saiz piksel blok dan kemudian mendarabkan nilai yang terhasil sebanyak 100%. Sebagai contoh, jika elemen adalah 400px lebar dan blok yang mengandunginya adalah 800px lebar, maka peratusan lebarnya ialah 50%.

Ringkasan

Artikel ini memperkenalkan secara ringkas unit yang biasa digunakan (px, %, vw/vh) dalam pembangunan bahagian hadapan web dan cara melakukan penukaran unit. Apabila membangunkan bahagian hadapan web, memahami kaedah penggunaan dan penukaran unit ini boleh melaksanakan reka bentuk responsif dengan lebih baik dan meningkatkan pengalaman pengguna halaman web.

Atas ialah kandungan terperinci penukaran unit hujung hadapan web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!