Panduan panjang unit CSS yang boleh anda gunakan untuk saiz fon

Penjelasan terperinci mengenai unit saiz fon CSS: Px, Em, Rem, %, VW/VH dan lain -lain

CSS menyediakan pelbagai unit untuk menentukan panjang atribut seperti saiz fon, masing -masing dengan penggunaan dan kaedah pengiraan yang berbeza. Artikel ini akan meneroka unit -unit ini secara mendalam, termasuk piksel (PX), unit EM (EM), unit REM (REM), peratusan (%) dan unit viewport (VW, VH, VMIN, VMAX), dan sebagainya, dan menganalisis mereka Formula tindak balas.

piksel (px)

piksel adalah unit bersaiz tetap, biasanya merujuk kepada titik individu pada skrin. Walau bagaimanapun, disebabkan ketumpatan piksel peranti yang berbeza, kesan paparan unit PX pada peranti yang berbeza mungkin tidak konsisten. CSS piksel mengira saiz dengan piksel rujukan untuk mengelakkan masalah ini. Pixel rujukan ditakrifkan sebagai sudut tontonan piksel tunggal apabila pembaca adalah satu lengan (kira -kira 28 inci) dari skrin pada peranti dengan ketumpatan piksel 96dpi. Ini menjadikan saiz satu piksel kira -kira 0.26mm.

Menggunakan piksel untuk menetapkan saiz fon adalah sukar untuk dikekalkan dan tidak mesra. Menukar fon semua elemen di laman web besar akan menjadi mimpi ngeri. Di samping itu, pengguna tidak dapat menyesuaikan saiz fon unit piksel melalui tetapan saiz fon penyemak imbas.

EM Unit (EM)

unit EM boleh mengelakkan penulisan semula keutamaan pengguna. Nilai 1EM bergantung pada saiz fon lalai penyemak imbas (biasanya 16px). Nilai EM unsur ditentukan oleh saiz fon yang dikira yang diwarisi. Sebagai contoh, jika elemen mewarisi saiz fon 25px, maka 2EM elemen itu akan dikira sebagai 50px.

Unit -unit EM sangat sesuai untuk menetapkan saiz fon elemen yang berkaitan dalam bahagian bebas laman web, seperti unsur -unsur dalam modul bebas.

REM Unit (REM)

Unit REM menyelesaikan masalah warisan saiz fon unit EM. Nilai 1REM sentiasa sama dengan saiz fon elemen akar, memudahkan pengiraan.

unit REM boleh digunakan untuk menetapkan saiz fon bekas induk modul bebas yang berbeza, supaya saiz fon semua elemen dalam modul adalah berdasarkan unsur induk mereka semasa bebas daripada modul lain.

peratus (%)

Peratusan adalah serupa dengan unit EM dan sering digunakan untuk menetapkan saiz fon elemen akar dalam reka bentuk web responsif untuk memudahkan pengiraan.

Unit Viewport (VW, VH, VMIN, VMAX)

Unit Viewport membenarkan menetapkan saiz fon unsur -unsur yang berbeza mengikut saiz viewport. Ini menghapuskan keperluan untuk menetapkan nilai saiz fon yang berbeza pada pelbagai titik putus. Sebagai contoh, 1VW adalah sama dengan 1% daripada lebar viewport.

Kelemahan unit viewport adalah bahawa pada saiz viewport yang sangat kecil atau sangat besar, saiz fon yang dikira dapat membuat teks sukar dibaca. Penyelesaiannya adalah menggunakan unit Viewport dalam kombinasi dengan unit lain.

unit mutlak lain

CSS juga mentakrifkan banyak unit mutlak, yang kurang berguna pada skrin, tetapi memainkan peranan penting dalam mencetak media seperti Point (PT) dan Picas (PC).

Tetapkan saiz font menggunakan kata kunci

Saiz fon boleh ditetapkan menggunakan kata kunci, termasuk kata kunci mutlak (seperti XX-Small, X-Small, Kecil, Sederhana, Besar, X-Large, dan XX-Large) dan kata kunci relatif (lebih besar dan lebih kecil).

Sokongan penyemak imbas

Sebelum menggunakan unit -unit ini dalam persekitaran pengeluaran, pastikan penyemak imbas sasaran mempunyai sokongan yang baik untuknya. Unit -unit seperti PX, EM disokong dalam semua pelayar arus perdana, manakala unit REM dan Viewport mungkin tidak disokong dengan baik dalam pelayar yang lebih tua.

Kesimpulan

Unit mutlak harus dielakkan sebanyak mungkin, tetapi unit relatif harus digunakan. Unit EM sesuai untuk menetapkan saiz fon elemen kanak -kanak dalam modul, dan unit REM sesuai untuk menetapkan saiz fon unsur -unsur bebas, seperti elemen induk akar dalam modul. Unit Viewport boleh digunakan bersempena dengan unit lain untuk memastikan susun atur disesuaikan dengan perubahan dalam lebar atau ketinggian viewport.

Artikel ini telah dikaji semula oleh Tom Hodgins. Terima kasih kepada semua pengulas rakan sebaya di SitePoint untuk mendapatkan kandungan SitePoint dengan sebaik -baiknya!

Atas ialah kandungan terperinci Panduan panjang unit CSS yang boleh anda gunakan untuk saiz fon. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!