Ada beberapa properti di CSS yang mengambil panjang (atau jarak) sebagai nilai. Properti ini termasuk properti model blok: lebar, tinggi, margin, padding, batas. Namun ada properti lain, seperti offset dan ukuran bayangan dari properti box-shadow, atau ukuran atau spasi font. Satuan panjang apa yang biasa digunakan di CSS? Ada banyak pilihan.

Satuan panjang mutlak

Piksel piksel

Sebuah piksel mungkin paling baik dianggap sebagai "kuantitas abstrak" karena tidak ada hubungannya dengan piksel fisik pada tampilan Anda.

piksel CSS- nilai abstrak yang digunakan oleh browser untuk menampilkan konten di halaman secara akurat, apa pun layarnya.

Piksel adalah satuan pengukuran dasar di web, dan karena piksel ditampilkan hampir seragam, banyak panjang yang dihitung dalam piksel; javascript "berbicara" yang sama dalam piksel.

inci masuk

Inci (dari duim Belanda - ibu jari) adalah satuan jarak dalam beberapa sistem non-metrik Eropa. Di css, inci hanya dipetakan ke piksel. Namun, perlu dicatat bahwa inci sangat jarang digunakan dalam CSS.

1 inci == 96 piksel

Sentimeter cm

Sentimeter adalah satuan panjang dalam berbagai sistem metrik, sama dengan 0,01 meter. Di css itu juga dipetakan ke piksel.

1cm == 37,8 piksel

Milimeter mm

Satuan pengukuran yang bergantung pada font

Em

Satuan pengukuran relatif. Dalam pencetakan, satuan pengukuran tambahan digunakan - salah satunya sesuai dengan lebar huruf kapital M. Properti utama yang mempengaruhi ukuran font adalah ukuran font.

Tanpa tambahan apa pun aturan css 1em bekerja seperti ini:

1em == 16px == 0,17in == 12pt == 1 buah == 4,2mm == 0,42cm

Jika Anda mengubah ukuran font dalam dokumen, 1em menjadi sama dengan ukuran font (yang ditetapkan) saat ini.

Ada beberapa hal yang tampaknya aneh. Jika sebuah elemen dengan ukuran font 1.1em terdapat di dalam elemen dengan ukuran font juga 1.1em , ditambah mereka berbagi induk yang sama dengan ukuran font 1.1em , maka tinggi font yang dihasilkan dari elemen yang disarangkan itu sendiri akan menjadi 1.1 X 1.1 X 1.1 == 1.331em . Artinya, Anda harus mempertimbangkan hal-hal berikut: ketika Anda menetapkan ukuran font ke suatu elemen sama dengan, misalnya, 10em , ini tidak berarti sama sekali bahwa di mana pun Anda meletakkan elemen tersebut, fontnya akan sama dengan 10em . Itu semua tergantung konteksnya (lihat buktinya).

Rem

tawaran Rem alternatif terbaik em s. Cara kerjanya hampir sama kecuali satu hal perbedaan utama: unit rem selalu relatif terhadap nilai dasar tetap, yaitu ukuran font elemen akar dokumen (dalam kasus HTML, ini selalu merupakan elemen html).

Dukungan browser tidak lengkap: tidak berfungsi di IE 8, Safari 4, atau iOS 3.2.

Barang

Poin adalah satuan ukuran yang sama dengan 1/72 inci. Paragraf sangat umum ditemukan di luar CSS (mungkin itulah sebabnya paragraf disertakan dalam CSS).

Poin bagus untuk dicetak, namun tidak ada yang menghentikan Anda untuk menggunakan poin di situs web. Meskipun perlu diperhatikan bahwa browser tidak selalu menampilkan item dengan cara yang sama.

Tombak

Ceritanya sama dengan poin, tapi 1pc == 12pt.

Mantan

Satuan pengukuran ini didasarkan pada tinggi x (huruf kecil) dari font saat ini. Terkadang informasi x-height dimasukkan ke dalam font itu sendiri, terkadang browser menghitung tinggi ini dengan mengukur tinggi huruf kecil karakter, dan dalam kasus terburuk, browser hanya menyetel tinggi ini ke 0.5em . Untuk memahami mengapa x-height digunakan, bayangkan sebuah ascender, seperti huruf kecil D. X-height tidak termasuk pemimpin ini.

Berbeda dengan em s, yang tidak berubah ketika Anda mengubah properti font-family, satuan ex akan berubah ketika Anda mengubah nilai properti font-family (bukti).

Bab

Mirip dengan x-height, tetapi sebagai ganti x-height, lebar karakter 0 digunakan. Juga berubah ketika nilai properti font-family diubah.

Dukungan browser: aktif saat ini tidak didukung oleh browser berbasis webkit (safari, Yandex, chrome).

Unit persentase panjang berdasarkan ukuran area pandang

Ay

Ini adalah lebar area tampilan perangkat. 1vw sama dengan 1% lebar area pandang. Mirip seperti persentase, hanya saja elemen yang ditentukan dengan satuan vw tidak lagi dipengaruhi oleh lebar elemen induknya.

Dukungan browser: tidak didukung oleh siapa pun peramban seluler,kecuali ios6. Ini berlaku untuk semua unit area pandang relatif.

Vh

Sama seperti VW saja satuan ini Pengukurannya tidak bergantung pada lebarnya, tetapi pada tinggi area tampilan perangkat.

Vmin

1vmin membutuhkan 1vw atau 1vh, mana saja yang lebih kecil. Saat menentukan ukuran font standar vmin bisa lebih berguna daripada vh atau vw .

Vmaks

1vmin membutuhkan 1vw atau 1vh, mana saja yang lebih besar.

Dukungan browser: browser berbasis webkit mendukung vmin, namun belum mendukung vmax. Firefox mendukung vmax.

Minat

Jarak yang ditentukan sebagai persentase bergantung pada properti yang sama dari elemen induk. Misalnya, jika suatu elemen memiliki lebar 450px dan elemen turunannya memiliki lebar 50%, maka lebar elemen turunannya adalah 225px.

Secara teknis persentase tidak bisa mengukur panjang, tapi saya sudah memasukkan persentase ke dalamnya artikel ini, karena panjang dan persentase saling terkait.

Satuan pengukuran apa yang harus dipilih saat menata

• CSS

Di postingan terakhir saya, saya menyinggung satuan pengukuran dan perdebatan serta diskusi mengenai topik ini segera dimulai di kolom komentar, jadi saya memutuskan untuk mengangkat masalah ini di postingan terpisah. Sekarang mari kita bahas :)

Satuan panjang terbagi dalam dua kategori: mutlak Dan relatif. KE mutlak termasuk:

• inci (dalam)
• sentimeter (cm)
• milimeter (mm)
• poin (pt)
• puncak (pc)

• mereka (skittles)
• x-tinggi (misal)
• piksel (piksel)

Di atas meja, sebutan individu ukuran penting font. Kita tidak membutuhkan sebagian besar dari mereka, tetapi kita perlu mengetahui beberapa.
Nomor 4 menunjukkan garis dasar elemen font, dan nomor 13 menunjukkan ukuran font, em. Jadi em adalah ukuran font yang ditentukan oleh tingginya huruf kapital dan dimensi elemen ekstensi di bagian atas dan bawah (diakritik dapat muncul di bagian atas, misalnya: e atau th).
Apa itu mantan? Ini adalah tinggi huruf kecil. Di bawah angka 3 pada tabel tertulis. Untuk font yang berbeda, rasio ini memiliki nilai yang berbeda. Namun tidak semua browser mendukung rasio ini.
Misalnya: perusahaan Microsoft diusulkan untuk mempertimbangkan 1em = 2ex untuk semua jenis font. Justru karena alasan mantan masuk browser yang berbeda mungkin berbeda, lebih baik bekerja dengannya jangan gunakan. Beberapa browser benar-benar menghitung ex dengan benar, dan beberapa menyukai IE setengahnya dari em. Namun kenyataannya bisa jadi 0,46; dalam font kecil perbedaan seperti itu tidak terlihat, tetapi dalam font besar akan ada perbedaan yang signifikan.
Sekarang mengenai penggunaan di situs pt, pc, in.
Jika kita menentukan ukuran suatu elemen di situs di pt, itu akan tetap diambil dari sesuatu. Jadi bagaimana browser mengatasi masalah ini?
Pada awal pembangunan peralatan komputer, ukuran monitor berada dalam kisaran kecil. Dan Microsoft menyarankan untuk mengambil 96px = 1in untuk kepastian dan ini akan menjadi resolusi perangkat kami.
1 inci = 96 piksel
Namun Apple mengatakan tidak :) Mari fokus pada printer dan ambil:
1 inci = 72pt
Namun dalam praktiknya terjadi hal berikut: apa resolusi lebih rendah, semakin kecil peluang untuk menempatkan informasi di sana.
Jadi Apple berubah pikiran dan membuat 1in = 96px, tapi ini semua sudah selesai omong kosong, karena resolusi fisik sebenarnya perangkat Anda berkisar antara 60 - 600 piksel/inci.
Namun seperti sebelumnya, nilai 96 sangat menentukan untuk perhitungan ulang. Artinya jika Anda menulis ukuran 10pt, browser akan melakukan hal berikut: 96/72*10. Begini ceritanya saat mengkonversi pt ke px.
Dalam praktiknya I Saya tidak merekomendasikannya digunakan pada monitor mutlak unit. Pada monitor, hal ini tidak menjadi masalah sama sekali, tetapi saat mencetak disarankan untuk menggunakannya. Saat mencetak, Anda perlu memastikan bahwa semuanya dihasilkan dalam pt.

Ada beberapa unit dasar pengukuran dalam CSS: relatif dan absolut. Saat bekerja dengan CSS, Anda harus memahami dengan jelas penggunaannya, jika tidak bekerja dengan cascading style sheet akan menjadi rumit dan tidak dapat dipahami. Satuan mutlak pengukuran dibagi menjadi 5 jenis, relatif menjadi 4. Perlu Anda ketahui bahwa satuan pengukuran absolut tidak bergantung pada perangkat keluaran, yaitu. monitor dan layar, sedangkan yang relatif menentukan ukuran suatu elemen relatif terhadap ukuran lainnya, mis. monitor, layar, elemen induk, dll. Sekarang lebih banyak tentangnya.

Satuan pengukuran relatif.

Unit relatif pengukuran biasanya digunakan untuk bekerja dengan teks dan dalam tata letak yang “dapat diperluas”. Tabel berikut menunjukkan satuan pengukuran relatif dasar.

E.M.

Nilai yang diukur bergantung pada ukuran font elemen saat ini (ditetapkan melalui atribut font-size). Jika tidak ditentukan secara eksplisit, ukuran teks yang disetel di browser akan digunakan. Oleh karena itu, 1em awalnya sama dengan ukuran font default di browser.

MANTAN

Argumen ini didefinisikan sebagai tinggi karakter huruf kecil "x". Ex terikat pada ukuran font default yang disetel di browser; jika elemen induk memiliki atribut "ukuran font" yang disetel, maka elemen tersebut terikat padanya.

PX

Piksel adalah 1 titik resolusi perangkat keluaran (monitor atau layar). Itu. Jika resolusi monitor Anda 1024*768 maka Anda memiliki 1024 piksel secara horizontal dan 768 piksel secara vertikal. Itu. Ukuran piksel secara langsung bergantung pada resolusi perangkat keluaran dan karakteristik teknisnya.

%

Satuan ukuran persentase bergantung pada dimensi elemen induk.

Satuan pengukuran mutlak.

Satuan pengukuran absolut lebih jarang digunakan dan lebih banyak digunakan saat bekerja dengan teks. Tabel berikut menunjukkan satuan pengukuran absolut.

Dari satuan-satuan tersebut, hanya pt (titik) yang harus dijelaskan, karena pc merupakan turunan dari pt dan penggunaan in, cm dan mm tidak perlu dijelaskan.

Intinya adalah satuan ukuran font yang paling umum dan banyak digunakan (ingat bagaimana mereka mengatur ukuran font di Word atau Open Office?).

CSS menggunakan unit absolut dan relatif untuk mengukur berbagai elemen. Satuan absolut tidak bergantung pada perangkat keluaran, tetapi satuan relatif menentukan ukuran suatu elemen relatif terhadap nilai ukuran lainnya.

Unit relatif

Unit relatif biasanya digunakan untuk bekerja dengan teks. Dalam tabel 1 mencantumkan unit relatif utama.

Satuan em adalah nilai yang dapat diubah, yang bergantung pada ukuran font elemen saat ini (ukurannya diatur melalui properti gaya font-size). Setiap browser memiliki ukuran teks bawaan yang digunakan ketika ukuran ini tidak ditentukan secara eksplisit. Oleh karena itu, awalnya 1em sama dengan ukuran font default browser atau ukuran font elemen induk. Notasi persentase identik dengan em , yaitu nilai 1em dan 100% adalah sama.

Satuan ex didefinisikan sebagai tinggi karakter huruf kecil "x". ex tunduk pada aturan yang sama seperti em , yaitu terikat pada ukuran font default browser atau ukuran font elemen induknya.

Satuan ch sama dengan lebar karakter "0" untuk elemen saat ini dan, seperti em, bergantung pada ukuran font.

Perbedaan em dan rem adalah sebagai berikut. em bergantung pada ukuran font elemen induk dan berubah bersamanya, dan rem terikat ke elemen root, yaitu ukuran font yang ditentukan untuk elemen html.

Ada juga sekelompok unit relatif yang terkait dengan ukuran area pandang browser. Dalam tabel 2 menunjukkan daftarnya dengan deskripsi.

Satuan mutlak

Satuan mutlak adalah dimensi fisik- inci, sentimeter, milimeter, titik, picas, dan piksel. Untuk perangkat dengan dpi rendah (jumlah piksel per inci menentukan kepadatan piksel), pengikatannya adalah per piksel. Dalam hal ini, satu inci sama dengan 96 piksel. Jelas sekali, inci sebenarnya tidak akan cocok dengan inci pada perangkat semacam itu. Pada perangkat DPI tinggi, inci sebenarnya sama dengan inci di layar, sehingga ukuran piksel dihitung sebagai 1/96 inci. Dalam tabel 3 mencantumkan satuan absolut dasar.

Contoh

tajuk 30 piksel

Ukuran teks 1,5 cm

Judul 24 poin

Geser teks ke kanan sebesar 30 milimeter

Catatan

Saat mengatur dimensi, pastikan untuk menentukan satuan ukuran, misalnya lebar: 30px. DI DALAM jika tidak Browser tidak akan dapat menampilkan hasil yang diinginkan karena tidak memahami ukuran yang Anda perlukan. Unit tidak ditambahkan hanya ketika nilai nol(batas: 0).

Internet Explorer mendukung unit vm, bukan vmin.

Spesifikasi

Setiap spesifikasi melewati beberapa tahap persetujuan.

• Rekomendasi - Spesifikasi telah disetujui oleh W3C dan direkomendasikan sebagai standar.
• Rekomendasi Kandidat ( Rekomendasi yang mungkin ) - kelompok yang bertanggung jawab atas standar tersebut merasa yakin bahwa standar tersebut telah mencapai tujuannya, namun memerlukan bantuan dari komunitas pengembang untuk menerapkan standar tersebut.
• Usulan Rekomendasi Rekomendasi yang Disarankan) - pada tahap ini dokumen diserahkan ke Dewan Penasihat W3C untuk persetujuan akhir.
• Draf Kerja - Versi draf yang lebih matang yang telah dibahas dan diubah untuk ditinjau oleh komunitas.
• Draf redaksi ( Draf redaksi) - versi draf standar setelah perubahan dilakukan oleh editor proyek.
• Draf ( Spesifikasi rancangan) - versi draf pertama dari standar.

Karena kebiasaan umum di kalangan pengembang dalam menggunakan nilai piksel, menurut kami tidak semua orang memahami tujuan sebenarnya dari parameter em dan cara kerjanya di CSS.

Saat menyusun beberapa panduan, kami entah bagaimana harus memahami makna-makna ini, jadi hari ini kami ingin menyampaikan sesuatu kepada Anda. Kami berharap panduan kami hari ini akan membantu Anda membuka kembali teknik yang nyaman dan bijaksana yang dirancang untuk mengembangkan proyek web.

Definisi em

Spesifikasinya cukup memperkenalkan parameter em:

Sama dengan nilai ukuran font terhitung yang diterapkan pada elemen

Elemen (
ukuran font: 20px;
}
Artinya, 1em yang disetel pada elemen tersebut atau turunannya akan sama dengan 20 piksel. .

Jika Anda menggunakan kode berikut:

Elemen (
ukuran font: 20px;
lebar: 4em;
tinggi: 4em;
}
Ini berarti lebar dan tinggi elemen (ditentukan di sini sebagai 4em x 4em) akan menjadi 80px x 80px (20px * 4 = 80px).

Mari kita lihat lebih dekat

Kunci untuk mengingatnya adalah tujuan dan asal muasalnya parameter ini. Mengikuti:

Em adalah satuan perubahan percetakan yang sama dengan arus ukuran yang ditentukan font. Nama em ada hubungannya dengan huruf M. Satuan ini awalnya berasal dari lebar huruf kapital M jika menggunakan font tertentu

Menggunakan metode ini perhitungan tidak terjadi dalam file CSS definisi yang tepat untuk apa mereka. Nilai satuan ini tergantung pada bagaimana Anda tabel bertingkat gaya. Secara teori, jika Anda menentukan panjang semua elemen dalam unit em, maka mengubah ukuran font saja sudah cukup untuk “menghancurkan” semua markup piksel sempurna Anda.

Bagaimana jika saya tidak menggunakannya parameter ukuran font?

Dalam contoh di atas dan di JSBin yang kami tautkan, parameter ukuran font ditentukan dengan tepat. Unit em selanjutnya diturunkan dari parameter "dasar". Namun bagaimana jika elemen tersebut tidak memiliki parameter ukuran font yang tepat?

Dalam hal ini, karena parameter ukuran font diwarisi di seluruh pohon dokumen, nilai unit em akan diturunkan dari parameter yang diwarisi. Jika ukuran font tidak disebutkan di seluruh dokumen, maka nilai satu unit em akan menjadi 16 piksel, yang merupakan nilai default (dan kami yakin nilai ini tidak berbeda di setiap browser).

"rem" harus otomatis untuk orang-orang

Saatnya menambahkan tambahan baru pada CSS: . Unit ini (namanya berasal dari “root em”) didukung sempurna di semua browser: IE9+, FF3.6+, Chrome, Safari 5+ dan Opera 11.6+.

Secara keseluruhan, unit ini sangat mudah dipahami. Ini memberi Anda kemampuan untuk membuat nilai unit em di seluruh dokumen HTML berdasarkan satu nilai "master" yang ditentukan dalam " html"-elemen. Dengan cara ini Anda bisa melupakan parameter ukuran font, karena semua unit em yang digunakan dalam dokumen akan didasarkan pada nilai rem utama, misalnya:

Html (ukuran font: 62,5%; )
badan ( ukuran font: 1,4rem; ) /* =14px */
h1 ( ukuran font: 2.4rem; ) /* =24px */
Dan, seperti halnya, jika Anda tidak menentukan nilai ukuran font di " html" elemen, unit "root em" akan berukuran 16 piksel secara default.

Carpe di-em

Anda dapat membuat banyak ekspresi lain bersama mereka :)

Setelah bekerja dalam pengembangan situs web selama bertahun-tahun, kami akhirnya dapat beralih dari lebar tetap. Meski banyak yang sudah beralih ke pembangunan desain adaptif, setiap orang masih menggunakan nilai piksel dari waktu ke waktu. Meskipun ini mungkin cukup untuk elemen templat, menurut kami tipografilah yang perlu diterjemahkan sepenuhnya ke nilai em.

Meskipun kita bisa menciptakannya seluruh templat menggunakan satuan em, menurut kami masuk templat adaptif Masih lebih baik menggunakan nilai piksel dan persentase dan, seperti disebutkan, menggunakan ems untuk tipografi.

Jadi, kami harap Anda menikmati tutorial kami hari ini dan menerapkan apa yang telah Anda pelajari.

Jangan lupa berkomentar!