ខ្នាតប្រវែង

ខ្នាត​ប្រវែង​នៅ​ក្នុង CSS ចែក​ជា ២ គឺ

• ​មិន​ប្រែប្រួល (Absolute Units)
• ប្រែប្រួល (Relative Units) ។

ការ​ជ្រើសរើស​ខ្នាត​ប្រវែង​ត្រឹមត្រូវ​គឺ​សំខាន់​ណាស់​សម្រាប់​ការ​បង្កើត​គេហទំព័រ​ដែល​មាន​ភាព​ flexible និង responsive។

---

ខ្នាត​ប្រវែង​មិន​ប្រែប្រួល (Absolute Units)

ខ្នាត​ប្រវែង​មិន​ប្រែប្រួល គឺ​ជា​ខ្នាត​ប្រវែង​ដែល​ថេរ មិន​ប្រែប្រួល​ទៅ​ណា ទោះ​បី​ជា​ប្ដូរ​មជ្ឈដ្ឋាន​ក៏​ដោយ ។ ខ្នាត​ទាំង​នេះ​មាន​ទំហំ​ជាក់លាក់​​ហើយ​ត្រូវ​បាន​កំណត់​ដោយ​ខ្នាត​ពិត​នៅ​ក្នុង​ពិភព​លោក​។

សង់ទីម៉ែត្រ​មិន​ត្រូវ​បាន​ប្រែប្រួល​ទេ ទោះ​ស្ថិត​នៅ​តំបន់​ណា​ក៏​ដោយ ។ 1cm នៅ​លើ​អេក្រង់​ទូរស័ព្ទ = 1cm នៅ​លើ​អេក្រង់​កុំព្យូទ័រ។

ខ្នាត	ពាក្យពេញ	ភាសាខ្មែរ	ការប្រើប្រាស់
px	pixel	ភីចសល	ប្រើ​ញឹកញាប់​បំផុត - សម្រាប់​អេក្រង់​ឌីជីថល
pt	point	ភ័ញ	សម្រាប់​ការ​បោះពុម្ព (1pt = 1/72 inch)
cm	centimeter	សង់ទីម៉ែត្រ	សម្រាប់​ការ​បោះពុម្ព
mm	millimeter	មីលីម៉ែត្រ	សម្រាប់​ការ​បោះពុម្ព
in	inch	អ៊ីន	សម្រាប់​ការ​បោះពុម្ព (1in = 96px)
pc	pica	ផៃកា	សម្រាប់​ការ​បោះពុម្ព (1pc = 12pt)

ឧទាហរណ៍​ការ​ប្រើប្រាស់ Absolute Units

/* Pixel - ប្រើ​សម្រាប់​អេក្រង់ */
.button {
    width: 200px;
    height: 50px;
    font-size: 16px;
    border: 2px solid black;
}

/* Point - ប្រើ​សម្រាប់​ការ​បោះពុម្ព */
@media print {
    body {
        font-size: 12pt;
    }
}

ចំណាំ: Pixel (px) គឺ​ជា​ខ្នាត​មិន​ប្រែប្រួល​ដែល​ត្រូវ​បាន​ប្រើ​ញឹកញាប់​បំផុត​សម្រាប់​ការ​អភិវឌ្ឍ​គេហទំព័រ។ ខ្នាត​ផ្សេង​ទៀត​ត្រូវ​បាន​ប្រើ​ច្រើន​សម្រាប់​ការ​បោះពុម្ព។

---

ខ្នាត​ប្រវែង​ប្រែប្រួល (Relative Units)

ខ្នាត​ប្រវែង​ប្រែប្រួល គឺ​ជា​ខ្នាត​ប្រវែង​ដែល​ប្រែប្រួល​ទៅ​តាម​មជ្ឈដ្ឋាន​ដែល​វា​ស្ថិត​នៅ​ក្នុង ។ ខ្នាត​ប្រែប្រួល​ជួយ​ធ្វើ​ឱ្យ​គេហទំព័រ​មាន​ភាព​ responsive និង​អាច​សម្រប​បាន​ទៅ​តាម​ទំហំ​អេក្រង់​ផ្សេងៗ។

ភាគរយ​ប្រែប្រួល​ទៅ​តាម​របស់​ដែល​វា​ស្ថិត​នៅ​ក្នុង ។ em និង rem ប្រែប្រួល​ទៅ​តាម​ទំហំ​អក្សរ។

ខ្នាត	អត្ថន័យ និង​បម្រើបម្រាស់
em	អាស្រ័យ​ទៅ​នឹង​ទំហំ​អក្សរ​នៃ​ធាតុ ។ ឧទាហរណ៍ ៖ 2em គឺ​មាន​ន័យ​ថា ទំហំ​២​ដង​ធៀប​នឹង​ទំហំ​អក្សរ​នៃ​ធាតុ​បច្ចុប្បន្ន ។ បើ​ធាតុ​បច្ចុប្បន្ន អក្សរ​ទំហំ 15px នោះ 2em គឺ 30px ។
rem	អាស្រ័យ​ទៅ​នឹង​ទំហំ​អក្សរ​នៃ​ធាតុ root (html) ។ ឧទាហរណ៍ ៖ បើ html មាន font-size: 16px នោះ 2rem = 32px។ ត្រូវ​បាន​ណែនាំ​សម្រាប់​ responsive design។
%	ភាគរយ​នៃ​ប្រវែង​ធាតុដែល​វា​ស្ថិត​នៅ​ក្នុង ។ ឧទាហរណ៍ ៖ 50% គឺ​មាន​ន័យ​ថា ៥០% នៃ​ធាតុ​ដែល​វា​ស្ថិត​នៅ​ក្នុង ។
vw	ភាគរយ​នៃ​ប្រវែង​ផ្ដេក​នៃ viewport (ផ្ទៃ​មើល) ។ ឧទាហរណ៍ ៖ 50vw គឺ​មាន​ន័យ​ថា ៥០%​នៃ​ប្រវែង​ផ្ដេក viewport ។ ល្អ​សម្រាប់​ធាតុ full-width។
vh	ភាគរយ​នៃ​កម្ពស់​នៃ viewport (ផ្ទៃ​មើល) ។ ឧទាហរណ៍ ៖ 50vh គឺ​មាន​ន័យ​ថា ៥០% នៃ​កម្ពស់ viewport ។ ល្អ​សម្រាប់​ធាតុ full-height។
vmin	ភាគរយ​នៃ​ប្រវែង​ដែល​តូច​ជាង​គេ​​នៃ viewport ។ ឧទាហរណ៍ ៖ 50vmin បើ​ប្រវែង​ផ្ដេក​នៃ viewport តូចជាង​កម្ពស់​បញ្ឈរ នោះ​វា​គិត​ទៅ​តាម​ប្រវែង​ផ្ដេក ដែល​មាន​តម្លៃ​ស្មើ​នឹង 50vw ។ តែ​បើ​កម្ពស់​បញ្ឈរ​នៃ viewport តូចជាង​ប្រវែង​ផ្ដេក​វិញ នោះ​វា​គិត​ទៅ​តាម​កម្ពស់​បញ្ឈរ ដែល​មាន​តម្លៃ​ស្មើ​នឹង 50vh ។
vmax	ភាគរយ​នៃ​ប្រវែង​ដែល​ធំ​ជាង​គេ​​នៃ viewport ។ ឧទាហរណ៍ ៖ 50vmax បើ​ប្រវែង​ផ្ដេក​នៃ viewport ធំជាង​កម្ពស់​បញ្ឈរ នោះ​វា​គិត​ទៅ​តាម​ប្រវែង​ផ្ដេក ដែល​មាន​តម្លៃ​ស្មើ​នឹង 50vw ។ តែ​បើ​កម្ពស់​បញ្ឈរ​នៃ viewport ធំជាង​ប្រវែង​ផ្ដេក​វិញ នោះ​វា​គិត​ទៅ​តាម​កម្ពស់​បញ្ឈរ ដែល​មាន​តម្លៃ​ស្មើ​នឹង 50vh ។
ex	អាស្រ័យ​ទៅ​នឹង​កម្ពស់​អក្សរ​តូច​នៃ​ធាតុ ។ (កម្រ​ប្រើ)
ch	អាស្រ័យ​ទៅ​នឹង​​ប្រវែង​ផ្ដេក​លេខ 0 នៃ​ធាតុ ។ (កម្រ​ប្រើ)

Viewport គឺ​ជា​ប្រអប់​ដែល​បង្ហាញ​ទំព័រ ឬ ផ្ទៃ​មើល​របស់​កម្មវិធី browser។

---

ឧទាហរណ៍​ការ​ប្រើប្រាស់ Relative Units

១. ការ​ប្រើប្រាស់ em និង rem

/* កំណត់​ root font size */
html {
    font-size: 16px;
}

/* ប្រើ rem - អាស្រ័យ​លើ root */
body {
    font-size: 1rem; /* = 16px */
    line-height: 1.5rem; /* = 24px */
}

h1 {
    font-size: 2.5rem; /* = 40px */
    margin-bottom: 1rem; /* = 16px */
}

/* ប្រើ em - អាស្រ័យ​លើ​ធាតុ​ parent */
.container {
    font-size: 18px;
}

.container p {
    font-size: 1em; /* = 18px */
    padding: 0.5em; /* = 9px */
}

២. ការ​ប្រើប្រាស់ ភាគរយ (%)

/* Layout ដែល​មាន​ភាព​ responsive */
.container {
    width: 100%; /* ពេញ​ទំហំ parent */
    max-width: 1200px;
    margin: 0 auto;
}

.sidebar {
    width: 25%; /* ១/៤ នៃ container */
    float: left;
}

.main-content {
    width: 75%; /* ៣/៤ នៃ container */
    float: left;
}

/* ទំហំ​អក្សរ​ដោយ​ប្រើ​ភាគរយ */
.small-text {
    font-size: 80%; /* តូច​ជាង parent 20% */
}

៣. ការ​ប្រើប្រាស់ Viewport Units (vw, vh)

/* Hero section ពេញ​អេក្រង់ */
.hero {
    width: 100vw; /* ពេញ​ប្រវែង​អេក្រង់ */
    height: 100vh; /* ពេញ​កម្ពស់​អេក្រង់ */
    background: linear-gradient(to bottom, #667eea, #764ba2);
}

/* ទំហំ​អក្សរ​ responsive */
h1 {
    font-size: 5vw; /* ប្រែប្រួល​តាម​ទំហំ​អេក្រង់ */
}

/* ការ​ប្រើ​ vmin សម្រាប់​ធាតុ​រឹងមាំ */
.square {
    width: 50vmin;
    height: 50vmin; /* តែង​តែ​ជា​ការ៉េ */
}

---

ណែនាំ​ការ​ប្រើប្រាស់ (Best Practices)

ឧទាហរណ៍​ការ​រួម​បញ្ចូល​គ្នា (Mixed Units Example)

/* Responsive Card Component */
.card {
    /* Layout */
    width: 90%; /* responsive width */
    max-width: 400px; /* កំណត់​ទំហំ​អតិបរមា */
    margin: 2rem auto; /* spacing ប្រើ rem */

    /* Styling */
    padding: 1.5rem; /* ប្រើ rem */
    border: 2px solid #ddd; /* ប្រើ px */
    border-radius: 8px; /* ប្រើ px */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* ប្រើ px */
}

.card-title {
    font-size: 1.75rem; /* ប្រើ rem */
    margin-bottom: 0.5em; /* ប្រើ em */
}

.card-text {
    font-size: 1rem; /* ប្រើ rem */
    line-height: 1.6; /* unitless សម្រាប់ line-height */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .card {
        width: 95%;
        padding: 1rem;
    }

    .card-title {
        font-size: 1.5rem;
    }
}

---

ការ​ប្រៀបធៀប Units ផ្សេងៗ

ស្ថានភាព	ខ្នាត​ណែនាំ	មូលហេតុ
ទំហំ​អក្សរ​ទូទៅ	rem	ងាយ​គ្រប់គ្រង, accessible, responsive
Padding/Margin ទាក់ទង​អក្សរ	em	scale ទៅ​តាម​ទំហំ​អក្សរ
Layout width	% ឬ vw	responsive ទៅ​តាម​អេក្រង់
Fixed spacing	px	ត្រូវ​ការ​ទំហំ​ជាក់លាក់
Border width	px	ត្រូវ​ការ​ភាព​ច្បាស់លាស់
Full screen elements	vh, vw	ពេញ​ផ្ទៃ​អេក្រង់
Media queries	px ឬ em	breakpoints ច្បាស់លាស់

ចំណាំ​សំខាន់: នៅ​ក្នុង​គម្រោង​ពិត គេ​តែង​តែ​ប្រើ​ខ្នាត​ច្រើន​ប្រភេទ​រួម​គ្នា ដើម្បី​ទទួល​បាន​លទ្ធផល​ល្អ​បំផុត។ ជ្រើសរើស​ខ្នាត​ដែល​សម​ស្រប​នឹង​គោលបំណង។