Melihat unit panjang di CSS

Penjelasan terperinci mengenai unit panjang CSS: dari mutlak hingga relatif, kemudian ke viewport berkaitan

Pengukuran yang tepat adalah bahagian penting dalam reka bentuk web. Kehadiran sekurang -kurangnya sepuluh unit panjang yang berbeza dalam CSS cukup untuk menggambarkan ini. Setiap unit mempunyai tujuan khususnya sendiri, yang membolehkan laman web lebih sesuai menyesuaikan diri dengan pelbagai peranti. Sebaik sahaja anda menguasai unit ini, anda boleh menyesuaikan saiz elemen dengan lebih tepat. Tutorial ini akan meneroka unit -unit yang berbeza yang terdapat di CSS dan membincangkan keadaan di mana unit -unit yang digunakan dan cara menggunakannya.

mata utama

CSS menawarkan pelbagai unit panjang, setiap unit dengan tujuan khususnya, yang membolehkan laman web untuk menyesuaikan diri dengan peranti yang berbeza. Unit -unit ini boleh dibahagikan kepada unit panjang mutlak, unit panjang relatif dan unit panjang relatif.
unit panjang mutlak (seperti piksel, inci, milimeter, dan sentimeter) mewakili pengukuran fizikal dan tidak dipengaruhi oleh saiz skrin atau resolusi. Walau bagaimanapun, mereka mungkin tidak sesuai untuk peranti digital atau untuk situasi di mana resolusi tidak diketahui.
Unit Panjang Relatif (termasuk EM, REM, dan Unit Viewport) Laraskan nilai mereka berdasarkan nilai atau ciri -ciri yang telah ditetapkan, menjadikannya sesuai untuk mewujudkan susun atur responsif. Mereka boleh menjadi relatif kepada fon yang digunakan, atau ke ketinggian dan lebar tetingkap skrin.
Panjang relatif viewport adalah berdasarkan ketinggian dan lebar viewport. Unit -unit ini (termasuk VH (ketinggian viewport), VW (lebar viewport), VMIN (viewport minimum), dan Vmax (maksimum viewport)) boleh digunakan untuk skala unsur berdasarkan saiz tetingkap penyemak imbas.

Unit Panjang Mutlak

Unit mutlak adalah perwakilan berangka pengukuran fizikal sebenar. Unit -unit ini tidak ada kaitan dengan saiz skrin atau resolusinya. Oleh itu, unit panjang mutlak tidak sesuai digunakan pada peranti digital atau apabila resolusi tidak diketahui. Unit -unit ini lebih sesuai apabila anda merancang untuk media fizikal seperti percetakan.

unit mutlak termasuk:

cm (cm)
mm (mm)
dalam (inci)
pc (tempahan kad)
pt (lb)
px (pixel)

Perhatikan bahawa draf pengeditan spesifikasi juga termasuk unit milimeter suku (q), tetapi ini adalah unit baru yang nampaknya tidak menyokong mana -mana pelayar.

anda mungkin melihat bahawa apabila menggunakan panjang mutlak, nilai yang sama unit yang sama akan mempunyai kesan paparan yang berbeza pada skrin yang berbeza. Ini kerana DPI skrin (titik per inci) berbeza. Skrin resolusi tinggi mempunyai DPI yang lebih tinggi daripada skrin resolusi rendah, jadi imej atau teks kelihatan lebih kecil.

piksel yang paling banyak digunakan dari semua unit mutlak adalah piksel (px). Piksel sering difahami sebagai mata tunggal di skrin, walaupun secara teknikalnya lebih kompleks daripada itu. Ia adalah unit pengukuran terkecil dan biasanya digunakan sebagai penanda aras untuk unit lain.

unit lain (seperti inci, milimeter, dan sentimeter) mewakili saiz fizikal unit -unit ini. Unit pound (pt) mewakili unit 1/72 inci, dan kad (PC) mewakili 1/6 inci. Berikut adalah beberapa kod CSS yang menggunakan enam unit mutlak biasa:

p {
  border-top: 0.5in solid blue;
  border-bottom: 18mm solid green;
  border-left: 1cm solid red;
  border-right: 40px solid black;
  letter-spacing: 0.4pc;
  font-size: 20pt;
}

codepen demo

Unit Panjang Relatif

Seperti namanya, tidak ada nilai tetap untuk unit relatif. Nilai mereka adalah relatif kepada beberapa nilai atau sifat yang telah ditetapkan. Unit relatif menjadikannya mudah untuk menyesuaikan saiz elemen dengan mudah kerana kita boleh mengaitkan lebar, ketinggian, saiz fon, dan lain -lain dengan beberapa parameter penanda aras lain.

Apabila membuat susun atur responsif, unit -unit ini biasanya disyorkan dan lebih sesuai untuk media digital. Nilai mereka boleh relatif kepada fon yang anda gunakan, atau ke ketinggian dan lebar tetingkap skrin.

unit relatif termasuk:

• ex (x ketinggian)
• ch (aksara)
• em (dinamakan selepas mencetak em, tetapi tidak sama)
• rem (root em)

Mari kita lihat unit -unit ini dengan lebih terperinci.

x ketinggian (ex) dan unit (ch) unit

unit ex jarang digunakan dalam pembangunan. 1EX adalah sama dengan saiz kes yang lebih rendah "x" fon yang digunakan. Dalam kebanyakan kes, nilai 1EX hampir sama dengan 0.5EM. Walau bagaimanapun, ini akan berbeza mengikut fon. Unit ini boleh dianggap sebagai unit bersamaan menegak EM.

p {
  font-size: 2ex;
}

aksara (ch) Unit ini berkaitan dengan aksara "0". 1ch adalah ukuran kemajuan watak "0" dalam fon.

p {
  margin: 2ch;
}

EM Unit

Nilai unit adalah sama dengan saiz fon elemen asas atau elemen induk. Sebagai contoh, jika elemen induk mempunyai saiz fon 20px, nilai 1EM akan dikira sebagai 20px untuk semua kanak -kanak langsung. Saiz fon elemen kanak -kanak dapat dengan mudah meningkat atau menurun mengikut unit asas. Nombor itu tidak perlu menjadi integer.

Menggunakan EM membolehkan kita dengan mudah menyimpan saiz fon pelbagai elemen pada skala tetap. Sebagai contoh, jika nilai saiz fon elemen induk adalah 50px, menetapkan saiz fon elemen kanak-kanak kepada 2EM akan sama dengan menetapkannya kepada 100px. Begitu juga, menetapkannya kepada 0.5EM akan menjadikan saiz fon elemen kanak -kanak 25px.

demonstrasi berikut menunjukkan contoh mudah bagaimana unit EM berfungsi:

codepen demo

Walau bagaimanapun, kadang -kadang unit EM menghasilkan hasil yang tidak diingini dalam kes elemen bersarang. Ini kerana nilai EM mengambil nilai yang ditandakan secara langsung oleh ibu bapa, jadi setiap elemen kanak -kanak bersarang akan mempunyai nilai EM yang sama, tetapi nilai yang dikira adalah berbeza kerana nilai yang dikira selalu relatif kepada ibu bapa langsungnya. Oleh itu, jika kita perlu menetapkan nilai elemen semasa kepada perkadaran elemen induk berbanding dengan elemen induk yang tidak langsung atau elemen induk bukan akar, ia menjadikannya sukar.

Berikut adalah demonstrasi yang menunjukkan kesan bersarang pengecualian unit EM. Untuk contoh ini, kami menganggap bahawa saiz fon penanda aras dalam dokumen adalah 16px (ini biasanya lalai):

codepen demo

Sila ambil perhatian elemen bersarang di HTML, kandungan setiap elemen mengisytiharkan saiz fon yang dikira.

Berikut adalah CSS untuk contoh ini:

p {
  border-top: 0.5in solid blue;
  border-bottom: 18mm solid green;
  border-left: 1cm solid red;
  border-right: 40px solid black;
  letter-spacing: 0.4pc;
  font-size: 20pt;
}

anda dapat melihat bahawa walaupun semua elemen div ditakrifkan sebagai 1.15EM, saiz fon sebenar mereka berbeza kerana mereka bersarang.

REM Unit

Ini adalah tempat unit REM berguna. Nilai REM sentiasa sama dengan saiz fon elemen akar (elemen HTML dalam dokumen HTML). Demo REM adalah serupa dengan unit EM. Berikut adalah CSS:

p {
  font-size: 2ex;
}

ini adalah demo mudah dengan bersarang yang sama seperti demo sebelumnya, tetapi kali ini menggunakan Rem:

codepen demo

Perhatikan bahawa bersarang masih wujud sekarang, tetapi tidak menjejaskan saiz fon yang dikira elemen bersarang.

Unit Panjang Relatif Viewport

Panjang relatif viewport adalah berdasarkan ketinggian dan lebar viewport. Tingkap atau viewport adalah ruang atau ruang bingkai yang dapat dilihat pada skrin.

Unit Relatif Viewport termasuk:

• vh (ketinggian viewport)
• vw (lebar viewport)
• vmin (nilai minimum viewport)
• vmax (nilai maksimum viewport)

ketinggian viewport (VH) dan lebar viewport (VW)

unit VH sangat berkorelasi dengan Viewport. Nilai VH adalah sama dengan 1/100 ketinggian viewport. Unit ini berguna jika kita mahu skala elemen berdasarkan ketinggian tetingkap penyemak imbas. Sebagai contoh, jika ketinggian viewport adalah 400px, 1VH sama dengan 4px. Jika ketinggian viewport adalah 800px, 1VH sama dengan 8px.

Sama seperti VH berkaitan dengan ketinggian tetingkap, unit VW sangat berkorelasi dengan viewport. Oleh itu, nilai 1VW boleh diperoleh sama. Ini bermakna 1VW adalah sama dengan 1/100 lebar viewport. Sebagai contoh, jika lebar tetingkap adalah 1200px, maka 1VW adalah 12px. Gunakan unit Viewport untuk menetapkan lebar, ketinggian, dan isi CSS elemen ke:

p {
  margin: 2ch;
}

codepen demo

Unit Minimum (VMIN) dan Viewport Maksimum (VMAX)

unit VMIN dikaitkan dengan kelebihan viewport dengan nilai yang lebih rendah, jadi ia boleh ketinggian atau lebar. Nilai 1Vmin adalah sama dengan 1/100 dari kelebihan panjang panjang. Sebagai contoh, jika saiz viewport adalah 500 x 700, nilai 1Vmin adalah sama dengan 5px. Jika saiznya adalah 1000 x 700, nilai adalah 7px.

Sebaliknya, Vmax mengambil kira nilai maksimum viewport. Faktor skala masih 1/100, jadi 1Vmax sama dengan 1/100 kelebihan dengan nilai yang lebih tinggi. Menggunakan contoh yang sama seperti di atas, jika saiz viewport adalah 500 x 700, nilai 1Vmax adalah sama dengan 7px. Jika saiznya adalah 1000 x 700, nilai adalah 10px. Berikut adalah CSS menggunakan VMIN dan VMAX untuk menetapkan lebar dan ketinggian:

div {
  font-size: 1.15em;
}

span {
  font-size: 2em;
}

codepen demo

Sokongan penyemak imbas

em, ex, px, cm, mm, in, pt dan pc Semua pelayar menyokongnya, termasuk IE yang lebih tua.

ch Firefox, Chrome 27, iaitu 9, Safari 7, dan Opera 20.

rem Semua pelayar menggunakan sokongan, termasuk IE9. Jika anda memerlukan lebih banyak sokongan, berikut adalah polyfill.

VW, VH dan VMIN Chrome 20, IE 9, Firefox 19, Safari 6, dan Opera 20. Satu perkara yang perlu diingat ialah di Internet Explorer, VMIN disokong melalui sintaks VM yang tidak standard. Untuk Polyfill, anda boleh mencuba vminpoly atau gunakan -prefix -bebas dan plugin.

vmax Chrome 20, Firefox 19, dan Opera 20, dan Safari 6.1. IE tidak menyokongnya. Anda boleh mencuba Polyfill ini untuk mendapatkan sokongan hacky dan membantu dengan beberapa pepijat dalam pelayar mudah alih yang berbeza.

Kesimpulan

Tutorial ini secara ringkas memperkenalkan unit panjang yang berbeza yang terdapat di CSS, termasuk banyak unit yang memudahkan susun atur responsif dan pengukuran silang peranti. Adakah anda menggunakan unit REM atau Viewport dalam mana -mana projek? Bagaimana pengalaman anda? Sila kongsi sebarang petua atau sebarang isu yang anda hadapi semasa menggunakan unit -unit ini di bahagian komen.

FAQ Unit Panjang CSS

Apakah pelbagai jenis unit panjang CSS?

unit panjang CSS digunakan untuk menentukan saiz pelbagai elemen di laman web. Terdapat dua jenis unit panjang dalam CSS: unit mutlak dan unit relatif. Unit mutlak ditetapkan dan saiznya tidak akan diubah berdasarkan sebarang sifat lain halaman. Mereka termasuk piksel (PX), pound (PT), PICAS (PC), inci (IN), sentimeter (cm), dan milimeter (mm). Sebaliknya, unit relatif adalah relatif kepada nilai panjang yang lain. Mereka termasuk EM, EX, CH, REM, VW, VH, VMIN, VMAX, dan Peratus (%).

Bagaimana memilih unit panjang CSS yang betul untuk projek saya?

Pemilihan unit panjang CSS bergantung kepada keperluan khusus projek. Jika anda memerlukan saiz tetap yang tidak akan berubah tanpa mengira saiz skrin atau saiz fon, anda harus menggunakan unit mutlak. Walau bagaimanapun, jika anda mahu reka bentuk anda responsif dan menyesuaikan diri dengan saiz skrin atau saiz fon yang berbeza, anda harus menggunakan unit relatif.

Apakah perbezaan antara unit "em" dan "rem" dalam CSS?

"em" dan "rem" adalah unit relatif dalam CSS. Saiz fon unit "em" berbanding dengan elemen induk terdekatnya. Sebaliknya, "REM" bermaksud "Root EM", berbanding dengan elemen akar (HTML), bukannya elemen induk. Ini bermakna bahawa "REM" akan sentiasa konsisten tanpa mengira tahap bersarang, yang menjadikannya lebih mudah untuk mengawal saiz keseluruhan dalam CSS.

bagaimana unit "VW" dan "VH" dalam kerja CSS?

unit "VW" (lebar viewport) dan "VH" (ketinggian viewport) dalam CSS adalah unit relatif, mewakili peratusan lebar dan ketinggian viewport. Satu unit "VW" adalah sama dengan 1% daripada lebar viewport, dan satu unit "VH" adalah sama dengan 1% daripada ketinggian viewport. Unit -unit ini amat berguna untuk membuat reka bentuk responsif yang sesuai dengan saiz viewport.

Bolehkah saya mencampurkan unit panjang CSS yang berbeza dalam satu projek?

Ya, anda boleh mencampurkan unit panjang CSS yang berbeza dalam satu projek. Walau bagaimanapun, adalah penting untuk memahami bagaimana unit -unit ini berfungsi dan bagaimana mereka berinteraksi untuk memastikan konsistensi dan respons reka bentuk. Sebagai contoh, anda boleh menggunakan "PX" untuk lebar sempadan, "em" untuk saiz fon, dan "VW" untuk lebar susun atur untuk membuat reka bentuk yang skala dengan baik merentasi saiz skrin yang berbeza.

Apakah kelebihan menggunakan unit relatif CSS?

Unit relatif dalam CSS memberikan beberapa kelebihan, terutamanya dalam reka bentuk responsif. Mereka membenarkan saiz elemen untuk skala relatif antara satu sama lain, saiz viewport, atau saiz fon lalai pengguna. Ini menjadikan reka bentuk anda lebih fleksibel dan dapat menyesuaikan diri dengan saiz skrin yang berbeza dan keutamaan pengguna.

Bagaimana untuk menukar antara unit panjang CSS yang berbeza?

Menukar antara unit panjang CSS yang berbeza boleh menjadi rumit kerana ia bergantung kepada pelbagai faktor seperti saiz fon semasa, saiz viewport, dan kepadatan piksel skrin. Walau bagaimanapun, terdapat beberapa alat dan kalkulator dalam talian yang dapat membantu anda dengan penukaran ini.

Apakah saiz fon lalai dalam CSS?

Saiz fon lalai dalam kebanyakan penyemak imbas ialah 16px. Ini bermakna 1EM atau 1REM adalah sama dengan 16px secara lalai. Walau bagaimanapun, pengguna boleh mengubah saiz fon lalai ini dalam tetapan penyemak imbas mereka, oleh itu unit relatif umumnya disyorkan sebagai saiz fon.

Bagaimana ketumpatan piksel mempengaruhi unit panjang CSS?

Ketumpatan piksel merujuk kepada bilangan piksel di kawasan fizikal skrin yang diberikan, biasanya diukur dalam piksel per inci (PPI). Skrin dengan ketumpatan piksel yang lebih tinggi menunjukkan lebih banyak butiran dalam ruang fizikal yang sama. Dalam CSS, piksel (PX) bukan piksel fizikal pada skrin, tetapi piksel rujukan, yang merupakan unit pengukuran fizikal yang mengambil kira kepadatan piksel skrin. Ini bermakna panjang 1px dalam CSS mungkin sesuai dengan pelbagai piksel fizikal pada skrin berkepadatan tinggi.

Apakah unit "CH" dalam CSS?

Unit "CH" dalam CSS adalah unit relatif yang mewakili lebar aksara "0" (sifar) dalam font semasa. Ia berguna untuk menetapkan lebar atau margin yang perlu diselaraskan dengan bilangan watak tertentu, tanpa mengira saiz fon sebenar.

Atas ialah kandungan terperinci Melihat unit panjang di CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!