ប្រព័ន្ធក្រឡាចត្រង្គ
ប្រើក្រឡាចត្រង្គ flexbox ដំបូងរបស់ទូរសព្ទចល័តដ៏មានអានុភាពរបស់យើង ដើម្បីបង្កើតប្លង់នៃរាង និងទំហំទាំងអស់ដោយអរគុណដល់ប្រព័ន្ធដប់ពីរជួរ កម្រិតឆ្លើយតបលំនាំដើមចំនួនប្រាំមួយ អថេរ Sass និង mixins និងរាប់សិបនៃថ្នាក់ដែលបានកំណត់ជាមុន។
ឧទាហរណ៍
ប្រព័ន្ធក្រឡាចត្រង្គរបស់ Bootstrap ប្រើស៊េរីនៃធុង ជួរដេក និងជួរឈរដើម្បីធ្វើប្លង់ និងតម្រឹមមាតិកា។ វាត្រូវបានបង្កើតឡើងដោយប្រើ flexbox និងឆ្លើយតបយ៉ាងពេញលេញ។ ខាងក្រោមនេះជាឧទាហរណ៍ និងការពន្យល់ស៊ីជម្រៅអំពីរបៀបដែលប្រព័ន្ធក្រឡាចត្រង្គភ្ជាប់មកជាមួយ។
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
ឧទាហរណ៍ខាងលើបង្កើតជួរទទឹងស្មើៗគ្នាចំនួនបីនៅទូទាំងឧបករណ៍ និងច្រកចូលមើលដោយប្រើថ្នាក់ក្រឡាចត្រង្គដែលបានកំណត់ជាមុនរបស់យើង។ ជួរឈរទាំងនោះត្រូវបានដាក់កណ្តាលទំព័រជាមួយមេ .container
។
របៀបដែលវាដំណើរការ
បំបែកវាចុះ នេះជារបៀបដែលប្រព័ន្ធក្រឡាចត្រង្គមកជាមួយគ្នា៖
-
ក្រឡាចត្រង្គរបស់យើងគាំទ្រ ចំណុចឈប់ឆ្លើយតបចំនួនប្រាំមួយ ។ ចំណុចបំបែក គឺផ្អែកលើ
min-width
សំណួរប្រព័ន្ធផ្សព្វផ្សាយ មានន័យថាវាប៉ះពាល់ដល់ចំណុចឈប់នោះ និងចំណុចទាំងអស់ខាងលើ (ឧ..col-sm-4
អនុវត្តចំពោះsm
,md
,lg
,xl
, និងxxl
)។ នេះមានន័យថាអ្នកអាចគ្រប់គ្រងទំហំកុងតឺន័រ និងជួរឈរ និងឥរិយាបថដោយចំណុចឈប់នីមួយៗ។ -
កណ្តាលកុងតឺន័រ និងផ្តេកដាក់មាតិការបស់អ្នក។ ប្រើ
.container
សម្រាប់ទទឹងភីកសែលឆ្លើយតប.container-fluid
សម្រាប់width: 100%
គ្រប់ច្រកចូលមើល និងឧបករណ៍ ឬកុងតឺន័រឆ្លើយតប (ឧ..container-md
) សម្រាប់ការរួមបញ្ចូលគ្នានៃទទឹងរបស់រាវ និងភីកសែល។ -
ជួរដេកគឺជារុំសម្រាប់ជួរឈរ។ ជួរឈរនីមួយៗមានផ្តេក
padding
(ហៅថារនាស់) សម្រាប់គ្រប់គ្រងចន្លោះរវាងពួកវា។ បន្ទាប់មក វាpadding
ត្រូវបានប្រឆាំងនៅលើជួរដេកដែលមានរឹមអវិជ្ជមាន ដើម្បីធានាថាខ្លឹមសារនៅក្នុងជួរឈររបស់អ្នកត្រូវបានតម្រឹមដោយមើលឃើញនៅផ្នែកខាងឆ្វេង។ ជួរដេកក៏គាំទ្រថ្នាក់កែប្រែផងដែរ ដើម្បី អនុវត្តទំហំជួរឈរ និង ថ្នាក់ផ្លូវទឹក ឱ្យ ស្មើភាពគ្នា ដើម្បីផ្លាស់ប្តូរគម្លាតខ្លឹមសាររបស់អ្នក។ -
ជួរឈរមានភាពបត់បែនមិនគួរឱ្យជឿ។ មានជួរឈរគំរូចំនួន 12 ក្នុងមួយជួរ ដែលអនុញ្ញាតឱ្យអ្នកបង្កើតបន្សំផ្សេងគ្នានៃធាតុដែលលាតសន្ធឹងលើចំនួនជួរឈរណាមួយ។ ថ្នាក់ជួរឈរបង្ហាញចំនួនជួរឈរគំរូដល់វិសាលភាព (ឧ.
col-4
វិសាលភាពបួន)។width
s ត្រូវបានកំណត់ជាភាគរយ ដូច្នេះអ្នកតែងតែមានទំហំដែលទាក់ទងដូចគ្នា។ -
Gutters ក៏ឆ្លើយតប និងអាចប្ដូរតាមបំណងផងដែរ។ ថ្នាក់ Gutter មាន នៅទូទាំងចំណុចឈប់ទាំងអស់ ដោយមានទំហំដូចគ្នាទាំងអស់ជាមួយនឹង រឹម និងចន្លោះទ្រនាប់ របស់យើង ។ ផ្លាស់ប្តូរប្រឡាយផ្តេកជាមួយ
.gx-*
ថ្នាក់, លូទឹកបញ្ឈរជាមួយ.gy-*
, ឬរនាំងទាំងអស់ដែលមាន.g-*
ថ្នាក់។.g-0
ក៏មានផងដែរដើម្បីយកទឹកចេញ។ -
អថេរ Sass ផែនទី និង mixins ផ្តល់ថាមពលដល់ក្រឡាចត្រង្គ។ ប្រសិនបើអ្នកមិនចង់ប្រើថ្នាក់ក្រឡាចត្រង្គដែលបានកំណត់ជាមុននៅក្នុង Bootstrap អ្នកអាចប្រើ Sass ប្រភពនៃក្រឡាចត្រង្គ របស់យើង ដើម្បីបង្កើតរបស់អ្នកផ្ទាល់ជាមួយនឹងការសម្គាល់អត្ថន័យបន្ថែមទៀត។ យើងក៏រួមបញ្ចូលផងដែរនូវលក្ខណៈសម្បត្តិផ្ទាល់ខ្លួន CSS មួយចំនួនដើម្បីប្រើប្រាស់អថេរ Sass ទាំងនេះសម្រាប់ភាពបត់បែនកាន់តែច្រើនសម្រាប់អ្នក។
ត្រូវដឹងពីដែនកំណត់ និង កំហុសជុំវិញ flexbox ដូចជា អសមត្ថភាពក្នុងការប្រើធាតុ HTML មួយចំនួនជា flex containers ។
ជម្រើសក្រឡាចត្រង្គ
ប្រព័ន្ធក្រឡាចត្រង្គរបស់ Bootstrap អាចសម្របតាមចំណុចបំបែកលំនាំដើមទាំងប្រាំមួយ និងចំណុចបំបែកណាមួយដែលអ្នកប្ដូរតាមបំណង។ ថ្នាក់ក្រឡាចត្រង្គលំនាំដើមទាំងប្រាំមួយមានដូចខាងក្រោម៖
- តូចបន្ថែម (xs)
- តូច (sm)
- មធ្យម (md)
- ធំ (lg)
- ធំបន្ថែម (xl)
- ធំបន្ថែម (xxl)
ដូចដែលបានកត់សម្គាល់ខាងលើ ចំណុចបំបែកទាំងនេះនីមួយៗមានកុងតឺន័រផ្ទាល់ខ្លួន បុព្វបទថ្នាក់តែមួយគត់ និងឧបករណ៍កែប្រែ។ នេះជារបៀបដែលក្រឡាចត្រង្គផ្លាស់ប្តូរឆ្លងកាត់ចំណុចឈប់ទាំងនេះ៖
xs <576px |
sm ≥576px |
md ≥768px |
lg ≥ 992px |
xl ≥ 1200px |
xxl ≥ 1400px |
|
---|---|---|---|---|---|---|
កុងតឺន័រmax-width |
គ្មាន (ស្វ័យប្រវត្តិ) | 540px | 720px | 960px | 1140px | 1320px |
បុព្វបទថ្នាក់ | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
# នៃជួរឈរ | ១២ | |||||
ទទឹងប្រឡាយ | 1.5rem (.75rem នៅខាងឆ្វេង និងស្តាំ) | |||||
លូទឹកផ្ទាល់ខ្លួន | បាទ | |||||
សំបុក | បាទ | |||||
លំដាប់ជួរ | បាទ |
ជួរឈរប្លង់ស្វ័យប្រវត្តិ
ប្រើប្រាស់ថ្នាក់ជួរឈរជាក់លាក់នៃចំនុចបំបែកសម្រាប់ការកំណត់ទំហំជួរឈរងាយស្រួលដោយមិនមានថ្នាក់លេខរៀងច្បាស់លាស់ដូចជា .col-sm-6
.
ទទឹងស្មើគ្នា
ឧទាហរណ៍ នេះគឺជាប្លង់ក្រឡាចត្រង្គពីរដែលអនុវត្តចំពោះគ្រប់ឧបករណ៍ និងច្រកមើល ពី xs
ដល់ xxl
. បន្ថែមចំនួននៃថ្នាក់ឯកតាតិចជាងសម្រាប់ចំណុចឈប់នីមួយៗដែលអ្នកត្រូវការ ហើយជួរឈរនីមួយៗនឹងមានទទឹងដូចគ្នា។
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
កំណត់ទទឹងជួរឈរមួយ។
ប្លង់ស្វ័យប្រវត្តិសម្រាប់ជួរឈរក្រឡាចត្រង្គ flexbox ក៏មានន័យថាអ្នកអាចកំណត់ទទឹងនៃជួរឈរមួយ ហើយឱ្យជួរឈរបងប្អូនបង្កើតទំហំដោយស្វ័យប្រវត្តិនៅជុំវិញវា។ អ្នកអាចប្រើថ្នាក់ក្រឡាចត្រង្គដែលបានកំណត់ជាមុន (ដូចបង្ហាញខាងក្រោម) ក្រឡាចត្រង្គ mixins ឬទទឹងក្នុងជួរ។ ចំណាំថាជួរឈរផ្សេងទៀតនឹងផ្លាស់ប្តូរទំហំមិនថាទទឹងនៃជួរឈរកណ្តាលនោះទេ។
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
មាតិកាទទឹងអថេរ
ប្រើ col-{breakpoint}-auto
ថ្នាក់ដើម្បីទំហំជួរឈរដោយផ្អែកលើទទឹងធម្មជាតិនៃមាតិការបស់វា។
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
ថ្នាក់ឆ្លើយតប
ក្រឡាចត្រង្គរបស់ Bootstrap រួមមានប្រាំមួយថ្នាក់នៃថ្នាក់ដែលបានកំណត់ជាមុនសម្រាប់ការកសាងប្លង់ឆ្លើយតបស្មុគស្មាញ។ ប្ដូរទំហំជួរឈររបស់អ្នកតាមបំណងលើឧបករណ៍តូច តូច មធ្យម ធំ ឬធំបន្ថែមទៀត ទោះជាយ៉ាងណាអ្នកមើលឃើញថាសម។
ចំណុចឈប់ទាំងអស់។
សម្រាប់ក្រឡាចត្រង្គដែលដូចគ្នាពីឧបករណ៍តូចបំផុតទៅធំបំផុត សូមប្រើ .col
និង .col-*
ថ្នាក់។ បញ្ជាក់ថ្នាក់លេខរៀង ពេលអ្នកត្រូវការជួរឈរដែលមានទំហំពិសេស។ បើមិនដូច្នេះទេ មានអារម្មណ៍សេរីក្នុងការនៅជាប់ .col
។
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>
ជង់ទៅផ្ដេក
ដោយប្រើសំណុំ .col-sm-*
ថ្នាក់តែមួយ អ្នកអាចបង្កើតប្រព័ន្ធក្រឡាចត្រង្គមូលដ្ឋានមួយដែលចាប់ផ្តើមចេញជាជង់ ហើយក្លាយជាផ្ដេកនៅចំណុចបំបែកតូច ( sm
)។
<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
ច្របលចូលគ្នារួចហើយផ្គូរផ្គង់
មិនចង់ឱ្យជួរឈររបស់អ្នកគ្រាន់តែជង់ក្នុងលំដាប់ក្រឡាមួយចំនួន? ប្រើបន្សំនៃថ្នាក់ផ្សេងៗគ្នាសម្រាប់ថ្នាក់នីមួយៗតាមតម្រូវការ។ សូមមើលឧទាហរណ៍ខាងក្រោមសម្រាប់គំនិតកាន់តែប្រសើរឡើងអំពីរបៀបដែលវាដំណើរការទាំងអស់។
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
ជួរជួរ
ប្រើ .row-cols-*
ថ្នាក់ឆ្លើយតបដើម្បីកំណត់ចំនួនជួរឈរដែលបង្ហាញខ្លឹមសារ និងប្លង់របស់អ្នកបានយ៉ាងរហ័ស។ ចំណែក .col-*
ថ្នាក់ធម្មតាអនុវត្តចំពោះជួរឈរនីមួយៗ (ឧ. .col-md-4
) ថ្នាក់ជួរឈរត្រូវបានកំណត់នៅលើមេ .row
ជាផ្លូវកាត់។ .row-cols-auto
អ្នកអាចផ្តល់ឱ្យជួរឈរនូវទទឹងធម្មជាតិរបស់ពួកគេ ។
ប្រើថ្នាក់ជួរឈរជួរដេកទាំងនេះ ដើម្បីបង្កើតប្លង់ក្រឡាមូលដ្ឋានយ៉ាងរហ័ស ឬដើម្បីគ្រប់គ្រងប្លង់កាតរបស់អ្នក។
<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-auto">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-6">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
អ្នកក៏អាចប្រើ Sass mixin ដែលមានភ្ជាប់មកជាមួយផងដែរ row-cols()
៖
.element {
// Three columns to start
@include row-cols(3);
// Five columns from medium breakpoint up
@include media-breakpoint-up(md) {
@include row-cols(5);
}
}
សំបុក
ដើម្បីដាក់មាតិការបស់អ្នកជាមួយក្រឡាចត្រង្គលំនាំដើម សូមបន្ថែមជួរឈរថ្មី .row
និងសំណុំនៃ .col-sm-*
ជួរឈរនៅក្នុងជួរឈរដែលមានស្រាប់ .col-sm-*
។ ជួរដេកដែលជាប់គួររួមបញ្ចូលសំណុំជួរឈរដែលបន្ថែមរហូតដល់ 12 ឬតិចជាងនេះ (វាមិនតម្រូវឱ្យអ្នកប្រើជួរឈរទាំង 12 ដែលមានទាំងអស់)។
<div class="container">
<div class="row">
<div class="col-sm-3">
Level 1: .col-sm-3
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
សាស
នៅពេលប្រើឯកសារ Sass ប្រភពរបស់ Bootstrap អ្នកមានជម្រើសក្នុងការប្រើអថេរ Sass និង mixins ដើម្បីបង្កើតប្លង់ទំព័រផ្ទាល់ខ្លួន អត្ថន័យ និងការឆ្លើយតប។ ថ្នាក់ក្រឡាចត្រង្គដែលបានកំណត់ជាមុនរបស់យើងប្រើអថេរ និង mixins ដូចគ្នាទាំងនេះ ដើម្បីផ្តល់នូវឈុតទាំងមូលនៃថ្នាក់ដែលត្រៀមរួចជាស្រេចសម្រាប់ការប្រើប្រាស់នូវប្លង់ឆ្លើយតបរហ័ស។
អថេរ
អថេរ និងផែនទីកំណត់ចំនួនជួរឈរ ទទឹងផ្លូវទឹក និងចំណុចសំណួរប្រព័ន្ធផ្សព្វផ្សាយដែលត្រូវចាប់ផ្តើមជួរឈរអណ្តែត។ យើងប្រើវាដើម្បីបង្កើតថ្នាក់ក្រឡាចត្រង្គដែលបានកំណត់ជាមុនដែលបានចងក្រងជាឯកសារខាងលើ ក៏ដូចជាសម្រាប់ mixins ផ្ទាល់ខ្លួនដែលបានរាយខាងក្រោម។
$grid-columns: 12;
$grid-gutter-width: 1.5rem;
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
ល្បាយ
Mixins ត្រូវបានប្រើដោយភ្ជាប់ជាមួយអថេរក្រឡាចត្រង្គ ដើម្បីបង្កើត CSS semantic សម្រាប់ជួរឈរក្រឡាចត្រង្គនីមួយៗ។
// Creates a wrapper for a series of columns
@include make-row();
// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);
// Offset with margins
@include make-col-offset($size, $columns: $grid-columns);
ការប្រើប្រាស់ឧទាហរណ៍
អ្នកអាចកែប្រែអថេរទៅតម្លៃផ្ទាល់ខ្លួនរបស់អ្នក ឬគ្រាន់តែប្រើ mixins ជាមួយនឹងតម្លៃលំនាំដើមរបស់វា។ នេះជាឧទាហរណ៍នៃការប្រើប្រាស់ការកំណត់លំនាំដើមដើម្បីបង្កើតប្លង់ជួរឈរពីរដែលមានគម្លាតរវាង។
.example-container {
@include make-container();
// Make sure to define this width after the mixin to override
// `width: 100%` generated by `make-container()`
width: 800px;
}
.example-row {
@include make-row();
}
.example-content-main {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(8);
}
}
.example-content-secondary {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
}
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
ការកំណត់ក្រឡាចត្រង្គតាមបំណង
ដោយប្រើអថេរ និងផែនទីក្រឡាចត្រង្គ Sass ដែលភ្ជាប់មកជាមួយរបស់យើង វាអាចធ្វើទៅបានដើម្បីប្ដូរតាមបំណងនូវថ្នាក់ក្រឡាចត្រង្គដែលបានកំណត់ជាមុនទាំងស្រុង។ ផ្លាស់ប្តូរចំនួនថ្នាក់ ទំហំសំណួរមេឌៀ និងទទឹងធុង - បន្ទាប់មកចងក្រងឡើងវិញ។
ជួរឈរនិងបំពង់បង្ហូរទឹក
ចំនួនជួរឈរក្រឡាចត្រង្គអាចត្រូវបានកែប្រែតាមរយៈអថេរ Sass ។ $grid-columns
ត្រូវបានប្រើដើម្បីបង្កើតទទឹង (គិតជាភាគរយ) នៃជួរឈរនីមួយៗ ខណៈពេលដែល $grid-gutter-width
កំណត់ទទឹងសម្រាប់ជួរឈរ។
$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
ថ្នាក់ក្រឡាចត្រង្គ
ការផ្លាស់ទីហួសពីជួរឈរខ្លួនឯង អ្នកក៏អាចកំណត់ចំនួនក្រឡាក្រឡាចត្រង្គតាមបំណងផងដែរ។ ប្រសិនបើអ្នកចង់បានតែក្រឡាក្រឡាចត្រង្គបួន អ្នកនឹងធ្វើបច្ចុប្បន្នភាព $grid-breakpoints
និង $container-max-widths
អ្វីមួយដូចនេះ៖
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
នៅពេលធ្វើការផ្លាស់ប្តូរណាមួយចំពោះអថេរ Sass ឬផែនទី អ្នកនឹងត្រូវរក្សាទុកការផ្លាស់ប្តូររបស់អ្នក និងចងក្រងឡើងវិញ។ ការធ្វើដូច្នេះនឹងបញ្ចេញនូវសំណុំថ្មីនៃថ្នាក់ក្រឡាចត្រង្គដែលបានកំណត់ជាមុនសម្រាប់ទទឹងជួរឈរ អុហ្វសិត និងលំដាប់។ ឧបករណ៍ប្រើប្រាស់លទ្ធភាពមើលឃើញដែលឆ្លើយតបនឹងត្រូវបានអាប់ដេតផងដែរ ដើម្បីប្រើចំណុចឈប់ផ្ទាល់ខ្លួន។ ត្រូវប្រាកដថាកំណត់តម្លៃក្រឡាចត្រង្គនៅក្នុង px
(មិនមែន rem
, em
ឬ %
)។