Memahami Unit CSS (dan cara menggunakannya)

Anda mungkin telah melihat berbagai unit CSS dalam kode web sebelumnya, tetapi memahami cara kerjanya memungkinkan Anda menggunakannya secara lebih sengaja. Dalam posting ini, Anda akan mempelajari apa sebenarnya unit CSS, bagaimana mereka memengaruhi tata letak Anda, dan bagaimana menggunakannya di dalam Divi 5 membantu Anda mendesain lebih responsif.

Divi 5 membawa dukungan asli untuk unit CSS langsung ke pembangun. Berkat fitur unit canggih baru, Anda dapat menggunakan %, EM, REM, VW, dan lainnya tanpa kode khusus.

Apa unit CSS?

Unit CSS memberi tahu browser seberapa besar atau kecil sesuatu seharusnya. Apakah Anda mengatur ukuran heading, lebar bagian, atau jarak antar elemen, Anda menggunakan unit untuk menentukan ruang itu. Tanpa mereka, browser tidak tahu apa yang harus dilakukan dengan nilai -nilai Anda.

Misalnya, Lebar Menulis: 100 tidak berarti apa -apa untuk browser. Tetapi tambahkan unit, seperti 100px atau 100%, dan sekarang ia tahu persis apa yang Anda inginkan.

Ambil contoh ini dengan empat kotak, masing -masing menggunakan nilai CSS yang berbeda:

• Yang pertama menggunakan lebar: 100. Secara teknis tidak valid, tetapi banyak browser akan menjadikannya 100%.
• Yang kedua (100px) menggunakan lebar tetap.
• Skala ketiga dan keempat (100% dan 60%) relatif terhadap wadah induk.

Anda mungkin bertanya-tanya mengapa kotak pertama dengan lebar: 100 masih muncul lebar penuh, meskipun secara teknis tidak valid.

Lebar: 100 diabaikan oleh browser karena tidak memiliki unit. Tetapi dalam hal ini, kotak masih membentang melintasi wadah, bukan karena CSS diterima, tetapi karena elemen tingkat blok seperti Div secara alami menjangkau lebar penuh dari orang tua mereka secara default. Ini adalah kebetulan perilaku default, bukan hasil dari CSS yang tidak valid yang ditafsirkan sebagai 100%.

Unit CSS populer

Meskipun PX dan % umumnya muncul, banyak orang lain sama berguna begitu Anda tahu kapan harus menggunakannya:

Anda akan melihat unit -unit ini di mana -mana dalam desain web, dari pengaturan ukuran font, mendefinisikan lebar bagian, menyesuaikan bantalan dan margin, dan membangun tata letak grid yang fleksibel. Mereka adalah salah satu faktor penentu paling penting dalam penampilan dan berperilaku tata letak Anda. Dan di mana Anda menggunakan unit mana yang lebih penting dalam desain yang efektif, kami akan segera melakukannya.

Tapi pertama -tama, sangat membantu mengetahui bahwa semua unit CSS jatuh ke dalam dua jenis utama: absolut dan relatif.

Unit absolut & relatif

Memahami perbedaan sangat penting jika Anda ingin tata letak Anda bekerja dengan baik di berbagai ukuran layar.

Unit absolut

Unit absolut memiliki nilai tetap. Ini berarti bahwa ketika Anda mengatur sesuatu ke 100px, itu akan selalu 100 piksel, apakah pengguna ada di telepon, tablet, atau monitor desktop besar. Unit -unit ini tidak menanggapi ukuran layar atau tata letak di sekitarnya, yang membuatnya hebat saat Anda membutuhkan kontrol yang tepat.

Mereka sering digunakan untuk perbatasan, ukuran ikon, atau bayangan kotak tetap, biasanya di mana presisi lebih penting daripada fleksibilitas.

Tetapi ketepatan yang sama dapat menyebabkan masalah. Desain yang terlihat sempurna di layar besar mungkin meluap, menyusut dengan canggung, atau sepenuhnya pecah pada perangkat yang lebih kecil. Karena unit absolut tidak beradaptasi, mereka dapat membuat tata letak Anda terasa kaku kecuali digunakan dengan hati -hati.

Unit relatif

Seperti namanya, ini menyesuaikan berdasarkan lingkungannya. Alih -alih tetap terkunci pada ukuran tertentu, skala mereka tergantung pada konteksnya (elemen induk, viewport, dll). Ini membuat mereka jauh lebih fleksibel untuk desain responsif.

Beberapa unit menanggapi ukuran elemen induk, yang lain dengan ukuran font root halaman, dan beberapa bahkan bereaksi terhadap jendela browser itu sendiri. Berikut beberapa yang kunci:

• % skala dengan wadah induk.
• EM menyesuaikan berdasarkan ukuran font elemen induk.
• REM mengikuti ukuran font root halaman.
• VW dan VH menanggapi lebar dan tinggi viewport browser.

Karena mereka beradaptasi dengan lingkungan yang berbeda, unit -unit ini membantu Anda membangun tata letak yang terasa alami di layar apa pun. Mereka memperluas atau menyusut dengan ruang yang diberikan, yang membuat konten Anda dapat dibaca dan desain Anda seimbang di seluruh perangkat.

Mari kita lihat contoh cepat untuk melihat mengapa fleksibilitas ini penting. Misalkan Anda membangun bagian gambar dan mengatur lebarnya ke 1200px.

Itu mungkin terlihat sempurna pada monitor besar, tetapi pada tablet dengan lebar layar 768 piksel, gambar bisa meluap dan terlihat aneh. Sekarang coba gunakan:

width: 100%;

Ini memberitahu browser untuk membuat gambar mengisi lebar wadahnya. Apakah layar lebar atau sempit, gambar menyesuaikan secara otomatis.

Manfaat nyata menggunakan unit relatif adalah responsif. Anda tidak hanya menetapkan ukuran tetapi memberikan peramban yang jelas tentang bagaimana tata letak Anda harus berperilaku dalam skenario yang berbeda. Dan ketika Anda melakukannya dengan benar, konten Anda cocok di setiap layar.

Dengan menggunakan unit relatif di mana mereka masuk akal, Anda menghindari tata letak yang kaku, mengurangi kebutuhan akan breakpoint, dan menjaga desain Anda lebih mudah dikelola. Dan dengan Divi, Anda tidak perlu menulis satu baris kode untuk menggunakan unit CSS yang berbeda. Pilih unit yang Anda inginkan di pembangun dan lihat tata letak Anda merespons secara real time.

Kapan menggunakan unit CSS mana

Sekarang setelah Anda memahami perbedaan antara unit absolut dan relatif, langkah selanjutnya adalah mengetahui kapan harus menggunakan masing -masing.

Sebagai aturan, pergi dengan unit relatif ketika tata letak Anda perlu beradaptasi dengan ukuran layar yang berbeda. Ini sempurna untuk lebar bagian, tipografi, jarak antar elemen, atau tata letak halaman penuh. Karena skala mereka secara otomatis, mereka membantu Anda mempertahankan konsistensi tanpa membuat gaya terpisah untuk setiap perangkat.

Di sisi lain, unit absolut sangat membantu ketika Anda menginginkan sesuatu untuk tetap sama terlepas dari ukuran layar. Pikirkan perbatasan, ikon, jarak tetap, atau detail visual kecil.

Berikut adalah beberapa contoh untuk memandu pilihan Anda:

• Gunakan PX saat Anda membutuhkan kontrol yang tepat, seperti untuk ukuran ikon. Karena tidak beradaptasi, hindari untuk lebar tata letak atau teks.
• Gunakan % ketika Anda ingin elemen skala dengan wadahnya.
• Gunakan EM saat Anda ingin jarak skala dengan ukuran font elemen induk.
• Gunakan REM (biasanya disebut sebagai root em) jika Anda ingin ukuran yang konsisten di situs Anda. Karena didasarkan pada ukuran font root, itu membuat jarak dan tipografi dapat diprediksi.
• Gunakan VW dan VH untuk bagian layar penuh, area pahlawan, atau jarak yang merespons langsung ke viewport (seluruh tampilan layar perangkat Anda).

Untuk kontrol yang lebih canggih, Anda juga dapat menggabungkan unit menggunakan fungsi CSS. Calc () berguna saat mencampur nilai seperti 1REM + 5VW untuk jarak responsif dengan basis minimum. Dan Clamp () sangat ideal untuk menetapkan nilai cairan yang tumbuh atau menyusut di antara batas, menjadikannya alternatif yang lebih bersih untuk kueri media.

Pada akhirnya, memilih unit yang tepat melibatkan mempertimbangkan bagaimana masing -masing elemen harus berperilaku dalam skenario yang berbeda dan memilih unit yang paling berhasil.

Unit canggih Divi untuk membangun secara responsif tanpa pengkodean

Kami telah melihat bagaimana unit CSS memberi Anda kendali atas perilaku tata letak. Divi 5 mengambil kendali itu dan membuatnya mudah digunakan dengan unit canggih.

Berlangganan saluran YouTube kami

Dengan dukungan asli untuk %, EM, REM, VW, dan VH dibangun langsung ke dalam pembangun, Anda dapat menerapkan nilai CSS nyata ke modul, bagian, jarak, dan tipografi, tanpa perlu membuka panel kode. Di bidang numerik apa pun, cukup pilih unit pilihan Anda dari dropdown unit canggih, sesuaikan nilainya, dan lihat perubahan hidup.

Dan itu tidak berhenti di situ. Divi juga memungkinkan Anda menggunakan fungsi CSS canggih seperti calc () dan clamp () di pembangun visual. Itu berarti Anda dapat membuat nilai cairan, campuran unit, dan tata letak fine-tune dengan tingkat pengembang presisi yang sama dari CSS tulisan tangan, tetapi secara visual.

Butuh ukuran font yang berskala dengan lancar di berbagai ukuran layar? Gunakan klem (). Ingin mengimbangi jarak dengan campuran nilai tetap dan fleksibel? Coba calc (). Divi menangani semuanya, langsung dan tampak.

Anda tidak lagi menebak atau beralih antara desain dan kode. Divi memberi Anda kekuatan visual dan umpan balik instan untuk mendapatkan logika responsif dengan kontrol penuh atas bagaimana skala elemen Anda dan berperilaku di seluruh perangkat.

Pelajari segalanya tentang unit canggih Divi 5

Unit CSS disinkronkan dengan sempurna dengan alur kerja lanjutan Divi

Anda sudah melihat bagaimana Divi membuat menggunakan unit CSS individual mudah tepat di dalam pembangun. Tetapi kekuatan sebenarnya menunjukkan ketika unit -unit itu bekerja bersama di seluruh situs Anda. Di situlah fitur seperti variabel desain, preset grup opsi, dan fungsi CSS canggih seperti calc () dan clamp () benar -benar bersinar.

Divi tidak hanya membiarkan Anda memasukkan unit CSS ke bidang. Ini membantu Anda mengintegrasikannya ke seluruh sistem desain Anda tanpa menulis kode. Semuanya tetap konsisten, dapat diskalakan, dan lebih mudah dipelihara.

Mari kita lihat bagaimana Divi membantu Anda menggunakan unit CSS sebagai bagian dari alur kerja yang fleksibel dan digerakkan oleh logika:

1. Buat Layout Logic dengan Variabel Desain

Salah satu cara termudah untuk menghemat waktu pada proyek apa pun adalah dengan merencanakan logika tata letak Anda di muka. Alih -alih menyesuaikan ukuran jarak atau font yang sama di banyak tempat, Anda menentukan nilai -nilai itu sekali dan menggunakannya kembali di seluruh desain Anda, dengan variabel desain Divi.

Anda dapat membuat nilai-nilai yang dapat digunakan kembali seperti –Darddding atau –Section-gap, menggunakan unit CSS nyata seperti 2REM, 5VW, atau bahkan formula seperti Calc (2REM + 1VW). Setelah diatur, nilai -nilai ini dapat diterapkan di seluruh modul, baris, dan bagian agar semuanya konsisten.

Anda hanya perlu memperbarui variabel jika Anda ingin mengubahnya nanti. Perubahan mencerminkan di mana pun itu digunakan, menyelamatkan Anda dari bolak-balik memburu pengaturan individu. Dan karena unit CSS dibangun langsung ke dalam sistem Divi, Anda tidak mengandalkan tebakan tetapi menerapkan logika CSS nyata, secara visual. Itu membuat tata letak Anda lebih mudah dikelola, dapat diskalakan, dan lebih mudah disesuaikan seiring dengan tumbuhnya proyek Anda.

2. Gunakan clamp () dan calc () secara visual

Fungsi CSS seperti Clamp () dan Calc () membantu Anda membangun tata letak yang responsif. Mereka memungkinkan Anda mendefinisikan nilai -nilai fleksibel yang menyesuaikan ukuran layar tanpa menulis kueri media. Jadi, alih -alih mengatur ukuran tetap untuk setiap perangkat, Anda dapat menulis logika seperti klem (1Rem, 2VW, 2.5rem) untuk membiarkan browser skala hal -hal dengan lancar di antara batasan yang ditetapkan. Atau gunakan Calc (100VH - 80px) untuk menyesuaikan bagian Pahlawan berdasarkan ketinggian viewport Anda.

Biasanya, mereka membutuhkan menulis CSS secara manual. Di Divi, Anda dapat memasukkannya langsung ke dalam bidang angka apa pun.

Dan karena unit CSS didukung di dalam kedua fungsi, Anda dapat mencampur nilai seperti REM, VW, dan PX untuk mendapatkan perilaku yang Anda inginkan. Anda melihat hasilnya hidup saat Anda mengetik, yang membuatnya mudah untuk bereksperimen dan mendapatkan responsif yang benar tanpa meninggalkan pembangun.

3. Simpan logika unit dengan preset grup opsi

Setelah Anda mengatur tata letak menggunakan unit atau formula canggih, Anda tidak perlu membangunnya kembali lagi. Divi memungkinkan Anda untuk menyimpan logika gaya Anda, termasuk hal -hal seperti padding: klem (1rem, 3vw, 2rem), sebagai preset grup opsi.

Itu berarti saat berikutnya Anda membutuhkan pola jarak atau tata letak yang sama, Anda tidak menerapkan pengaturan yang sama, tetapi hanya preset yang disimpan.

Dan jika Anda menggunakan variabel desain di dalam preset, itu bahkan lebih baik. Anda dapat dengan mudah membuat sistem yang saling berhubungan di mana memodifikasi seluruh gaya situs web Anda hanya tergantung pada satu hal: mengubah variabel.

Di Divi, menggunakan unit CSS bukan hanya ukuran; ini tentang perilaku. Setiap nilai yang Anda tetapkan menjadi bagian dari sistem visual yang beradaptasi, berskala, dan tetap konsisten di seluruh tata letak Anda. Dan karena semuanya dibangun di dalam pembangun, rasanya kurang seperti pengkodean dan lebih seperti mendesain dengan logika.

Divi mengubah unit CSS menjadi negara adidaya visual

Anda tidak perlu menulis CSS untuk menggunakan unit CSS. Divi 5 membawa semuanya ke antarmuka visual di mana Anda dapat menjelajah, mendaftar, dan melihat pratinjau secara real time. Apakah Anda menyesuaikan jarak, membangun tipografi cairan, atau membuat logika tata letak dengan variabel dan preset, Divi memungkinkan Anda melakukan semuanya secara visual.

Siap mencobanya? Unduh Divi 5 dan mulailah menggunakan unit CSS nyata dalam desain Anda.