ខ្នាតប្រវែង

ខ្នាតរង្វាស់ (CSS Units)

នៅក្នុង CSS មានខ្នាតរង្វាស់ច្រើនជាង Pixel (px) ទៅទៀត! ការចេះប្រើប្រាស់ខ្នាតបានត្រឹមត្រូវ ជួយអោយវិបសាយរបស់អ្នកអាចបត់បែនបានគ្រប់កាលៈទេសៈ (Responsive) មិនថានៅលើទូរស័ព្ទដៃ ឬទូរទស្សន៍ឆ្លាតវៃនោះទេ។

១. ខ្នាតដាច់ខាត (Absolute Units)

ខ្នាតប្រភេទនេះគឺ ថេរ ជានិច្ច វាមិនប្រែប្រួលទៅតាមទំហំអេក្រង់ឡើយ។

• px (Pixels) : គឺជាខ្នាតដែលគេប្រើច្រើនជាងគេបំផុត (1px = ១ ចំណុចតូចលើអេក្រង់កុំព្យូទ័រ)។
• cm, mm, in : សង់ទីម៉ែត្រ, មីលីម៉ែត្រ, អ៊ីញ (កម្រប្រើណាស់ គេប្រើតែពេលចង់ Print វិបសាយចេញជាក្រដាសប៉ុណ្ណោះ)។

២. ខ្នាតដែលបត់បែនបាន (Relative Units) - សំខាន់ណាស់!

ខ្នាតប្រភេទនេះមានភាពឆ្លាតវៃ វាអាចពង្រីក ឬបង្រួមខ្លួនឯង ដោយផ្អែកលើអ្នកដទៃ (ដូចជាទំហំអេក្រង់ ឬទំហំអក្សរដើម)។

• % (ភាគរយ) : ធៀបនឹងទំហំប្រអប់មេរបស់វា (Parent)។ ឧទាហរណ៍ បើមេធំ 1000px នោះកូនដែលមានទំហំ 50% នឹងស្មើ 500px។
• vw (Viewport Width) : ធៀបនឹងទំហំ ទទឹងអេក្រង់ ទាំងមូល (1vw = 1% នៃទទឹងអេក្រង់)។
• vh (Viewport Height) : ធៀបនឹងទំហំ កម្ពស់អេក្រង់ ទាំងមូល។ ការប្រើ height: 100vh; គឺពេញនិយមបំផុតសម្រាប់ធ្វើអោយរូបភាព Cover ធំពេញអេក្រង់ដំបូង មុននឹង Scroll ចុះក្រោម!
• rem (Root em) : ធៀបនឹងទំហំអក្សរគោលរបស់វិបសាយ (ជាទូទៅគឺ 16px)។ ដូច្នេះ 2rem គឺស្មើនឹង 32px។ អ្នកជំនាញតែងតែប្រើ rem សម្រាប់ទំហំអក្សរ ដើម្បីអោយអក្សរអាចធំតូចទៅតាមការកំណត់នៅក្នុងទូរស័ព្ទរបស់ភ្ញៀវ!

៣. តើគួរប្រើមួយណា នៅពេលណា?

ក្នុងនាមជាអ្នកជំនាញ CSS សូមអនុវត្តតាមរូបមន្តនេះ៖

• ប្រើ px សម្រាប់ទំហំស៊ុម (Border) ឬស្រមោលតូចៗ។
• ប្រើ rem សម្រាប់ទំហំអក្សរ (font-size)។
• ប្រើ % សម្រាប់បែងចែក Layout ជួរឈរ (Columns)។
• ប្រើ vh សម្រាប់រូបភាពផ្ទៃខាងក្រោយ ឬវីដេអូ ដែលចង់អោយពេញអេក្រង់។