Responsive Design និងការបោះពុម្ពផ្សាយ

មាតិកា

មួយទំព័រ គ្រប់អេក្រង់
Viewport Meta Tag
បត់បែនបានតាមលំនាំដើម
Media Query
Mobile First
រូបភាព Responsive
អក្សរដែលបត់បែនបានដោយ clamp()
សាកល្បងដោយ DevTools Device Mode
ទំព័រ Profile ដែល Responsive
បោះពុម្ពផ្សាយទៅ GitHub Pages
ត្រួតពិនិត្យដោយ Lighthouse
ទៅទីណាបន្ទាប់
សាកល្បងដោយខ្លួនឯង

ទំព័ររបស់អ្នកនឹងត្រូវបានមើលនៅលើទូរស័ព្ទ 6 អ៊ីញ កុំព្យូទ័រយួរដៃ និង monitor 27 អ៊ីញ ទាំងបញ្ឈរ និងផ្ដេក ជាមួយអក្សរធំ និងតូច។ នៅកម្ពុជា និងក្នុងពិភពលោកភាគច្រើន អ្នកទស្សនាភាគច្រើនប្រើទូរស័ព្ទ។ អ្នកមិនអាចសាងសង់ layout ថេរមួយសម្រាប់ទាំងអស់នោះបានទេ ហើយក៏មិនគួរសាងសង់ website ដាច់ដោយឡែកពីគ្នាដែរ។

Responsive design គឺជាទំព័រ HTML តែមួយ ជាមួយ CSS ដែលសម្របខ្លួនទៅតាមលំហដែលមាន។ វាផ្អែកលើគំនិតបី៖ viewport tag, layout ដែលបត់បែនបាន និង media query។

2. Viewport Meta Tag

ទូរស័ព្ទមានល្បិចមួយ។ នៅពេលទំព័រមិនប្រាប់អ្វីផ្សេង ពួកវាធ្វើពុតជាអេក្រង់ desktop ទទឹងប្រហែល 980px ហើយបន្ទាប់មកបង្រួមទំព័រឲ្យសម ដែលធ្វើឲ្យអ្វីៗតូចខ្លាំង។ Tag នេះបិទល្បិចនោះ៖

<meta name="viewport" content="width=device-width, initial-scale=1">

វាមានន័យថា "ប្រើទទឹងពិតរបស់ឧបករណ៍ នៅកម្រិតពង្រីកធម្មតា។" អ្នកបានបន្ថែមវានៅជំពូកទី 2។ សូមពិនិត្យថាគ្រប់ទំព័រមានវា — បើគ្មានវា CSS ទាំងអស់នៅក្នុងជំពូកនេះមិនដំណើរការលើទូរស័ព្ទពិតទេ។

កុំបន្ថែម user-scalable=no ឬ maximum-scale=1៖ ពួកវាបង្អាក់មនុស្សមិនឲ្យពង្រីក ដែលជាការបរាជ័យផ្នែក accessibility។

3. បត់បែនបានតាមលំនាំដើម

អ្នកបានសរសេរទំព័រ responsive ភាគច្រើនរួចហើយ ដោយមិនបានដឹងខ្លួន។ បច្ចេកទេសស្នូលគឺ៖

Block element បំពេញ container របស់វា ដូច្នេះវាបង្រួមតាម container។
max-width ជំនួស width ដូចក្នុង max-width: 48rem។
rem និង % មិនមែនភីកសែលថេរ សម្រាប់ទំហំ និងគម្លាត។
img { max-width: 100%; height: auto; } ដើម្បីកុំឲ្យរូបភាពលើសគែម។
Flexbox ជាមួយ flex-wrap និង Grid ជាមួយ auto-fit ដែលបន្ថែម និងដកជួរឈរចេញដោយខ្លួនឯង។

សាកល្បងទំព័រណាមួយដោយអូស browser window ឲ្យចង្អៀតទៅៗ។ បើមាតិកាលើសទៅចំហៀង ធ្វើឲ្យមាន scrollbar ផ្ដេក នោះមានអ្វីមួយដែលមានទទឹងថេរធំពេក។ នោះគឺជា bug ដែលត្រូវរក។

4. Media Query

ពេលខ្លះ ការបត់បែនមិនគ្រប់គ្រាន់ ហើយ layout គួរ ផ្លាស់ប្តូរ ពិតៗ៖ ម៉ឺនុយដែលបត់បិទ ទំព័រមួយជួរឈរដែលប្តូរទៅពីរ។ Media query អនុវត្ត CSS តែនៅពេលលក្ខខណ្ឌមួយពិតប៉ុណ្ណោះ៖

@media (min-width: 40rem) {
  .about {
    grid-template-columns: 12rem 1fr;
  }
}

សូមអានវាថា៖ "នៅពេល viewport មានទទឹងយ៉ាងតិច 40rem សូមអនុវត្ត rule ទាំងនេះ។" អ្នកក៏អាចសាកល្បងអ្វីផ្សេងទៀតបានដែរ៖

Query	ពិតនៅពេល
`(min-width: 40rem)`	Viewport មានទទឹង យ៉ាងតិច 40rem
`(max-width: 40rem)`	Viewport មានទទឹង យ៉ាងច្រើន 40rem
`(orientation: landscape)`	ទទឹងធំជាងកម្ពស់
`(prefers-color-scheme: dark)`	អ្នកប្រើចូលចិត្ត dark mode (ជំពូកទី 8)
`(prefers-reduced-motion: reduce)`	អ្នកប្រើចង់បាន animation តិចជាង
`print`	នៅពេលបោះពុម្ពទំព័រ

សូមជ្រើសរើស breakpoint ដែលជាទទឹងដែល layout ផ្លាស់ប្តូរ ពី មាតិកា របស់អ្នក មិនមែនពីឧបករណ៍ជាក់លាក់ណាមួយទេ៖ អូស window ឲ្យធំទៅៗរហូតដល់ layout មើលទៅលាតពេក ហើយដាក់ breakpoint នៅទីនោះ។ ចំណុចចាប់ផ្តើមទូទៅជា rem គឺ 40rem (~640px), 48rem (~768px) និង 64rem (~1024px)។ សូមប្រើ rem ជាជាង px ដើម្បីឲ្យ layout គោរពទំហំអក្សរធំជាងផងដែរ។

5. Mobile First

មានពីរវិធីក្នុងការតម្រៀប CSS របស់អ្នក៖

Desktop first៖ សរសេរសម្រាប់អេក្រង់ធំ បន្ទាប់មកប្រើ query max-width ដើម្បីលុបចោលរបស់ខ្លះសម្រាប់អេក្រង់តូច។
Mobile first៖ សរសេរ layout មួយជួរឈរដែលសាមញ្ញជាមូលដ្ឋាន បន្ទាប់មកប្រើ query min-width ដើម្បី បន្ថែម ភាពស្មុគស្មាញនៅពេលមានលំហកើនឡើង។

Mobile first គឺជាទម្លាប់ដែលល្អជាង។ CSS មូលដ្ឋានគឺសាមញ្ញបំផុត — មួយជួរឈរ តម្រៀបពីលើចុះក្រោម — ហើយទូរស័ព្ទ ដែលមានអ៊ីនធឺណិតយឺតបំផុត និងអេក្រង់តូចបំផុត ទទួលបានកូដតិចបំផុតដើម្បីដំណើរការ។ អេក្រង់ធំជាងបន្ថែមអ្វីដែលពួកវាត្រូវការ៖

/* Base: phones. Single column. */
.gallery {
  display: grid;
  gap: 1rem;
}

/* 40rem and up: two columns */
@media (min-width: 40rem) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 64rem and up: three columns */
@media (min-width: 64rem) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

(ដូចដែលជំពូកទី 10 បានបង្ហាញ repeat(auto-fit, minmax(…)) ច្រើនតែ មិនត្រូវការ query ទេ។ សូមប្រើ query សម្រាប់ការផ្លាស់ប្តូរដែលវាមិនអាចបង្ហាញបាន។)

6. រូបភាព Responsive

ការធ្វើឲ្យរូបភាពបង្រួមគឺងាយស្រួល ប៉ុន្តែការធ្វើឲ្យវា ស្រាល នៅលើទូរស័ព្ទត្រូវការច្រើនជាងនេះបន្តិច។ ឧបករណ៍ HTML ពីរជួយបាន។

srcset ផ្តល់ឲ្យ browser នូវទំហំច្រើន ហើយឲ្យវាជ្រើសរើសខ្លួនឯង៖

<img
  src="images/dara-800.jpg"
  srcset="images/dara-400.jpg 400w,
          images/dara-800.jpg 800w,
          images/dara-1600.jpg 1600w"
  sizes="(min-width: 40rem) 12rem, 100vw"
  alt="Dara Sok smiling at a laptop"
  width="800" height="600">

លេខ w គឺជាទទឹងពិតនៃ file នីមួយៗ ហើយ sizes ប្រាប់ browser ថារូបភាពនឹងបង្ហាញទូលាយប៉ុនណា ដើម្បីឲ្យវាជ្រើសរើសបានមុនពេលទាញយក។ ទូរស័ព្ទទទួលបាន file 400px ដែលសន្សំទិន្នន័យ។

<picture> អនុញ្ញាតឲ្យអ្នកផ្តល់ format ឬការកាត់ផ្សេងៗ៖

<picture>
  <source srcset="images/dara.webp" type="image/webp">
  <img src="images/dara.jpg" alt="Dara Sok smiling at a laptop"
       width="800" height="600">
</picture>

Browser ដែលយល់ WebP ប្រើវា ហើយ browser ផ្សេងទៀតត្រឡប់ទៅប្រើ JPEG នៅក្នុង <img> វិញ។ សម្រាប់ទំព័រ profile រូបភាពមួយទំហំសមល្មមជាមួយ max-width: 100% ក៏គ្រប់គ្រាន់ ហើយអ្នកអាចរំលងទាំងពីរបានរហូតដល់ពេលអ្នកត្រូវការ។

7. អក្សរដែលបត់បែនបានដោយ clamp()

ជំនួសឲ្យការប្រើ media query សម្រាប់ទំហំ heading នីមួយៗ function clamp() ជ្រើសរើសតម្លៃមួយរវាងអប្បបរមា និងអតិបរមា ដោយកើនឡើងតាម viewport៖

h1 {
  font-size: clamp(1.75rem, 1.2rem + 3vw, 3rem);
}

Argument ទាំងបីរបស់វាគឺ clamp(minimum, preferred, maximum)។ Heading មិនដែលតូចជាង 1.75rem និងមិនដែលធំជាង 3rem ហើយនៅចន្លោះនោះ វាកើនឡើងយ៉ាងរលូនតាមទទឹងអេក្រង់ (3vw)។ rem នៅក្នុងតម្លៃ preferred ធ្វើឲ្យវានៅតែឆ្លើយតបនឹងការកំណត់ទំហំអក្សររបស់អ្នកប្រើ។ clamp() ក៏ដំណើរការសម្រាប់ padding, gap និងទទឹងដែរ។

8. សាកល្បងដោយ DevTools Device Mode

អ្នកមិនត្រូវការទូរស័ព្ទដប់គ្រឿងដើម្បីសាកល្បងទេ។ នៅក្នុង DevTools របស់ Chrome ឬ Edge សូមចុចរូបតំណាង device toggle (ឬចុច Ctrl+Shift+M / Cmd+Shift+M)។

ជ្រើសរើស preset ឧបករណ៍ (iPhone, Pixel, iPad) ឬ Responsive ហើយអូសគែមទៅទទឹងណាមួយ។
បង្វិលរវាងបញ្ឈរ និងផ្ដេក។
របារពីលើទំព័របង្ហាញ breakpoint នៃ media query របស់អ្នកជាបន្ទះពណ៌ ចុចលើមួយដើម្បីលោតទៅទទឹងនោះ។
កំណត់ល្បឿនបណ្តាញទៅ Slow 4G ដើម្បីដឹងពីទម្ងន់នៃរូបភាពរបស់អ្នក។

Firefox មាន Responsive Design Mode ស្រដៀងគ្នា (Ctrl+Shift+M)។ Device mode ល្អណាស់ ប៉ុន្តែមិនល្អឥតខ្ចោះទេ៖ មុនពេលអ្នកចេញផ្សាយ សូមបើកទំព័រនៅលើទូរស័ព្ទពិតយ៉ាងហោចណាស់មួយ។ ពេល Live Server កំពុងដំណើរការ ទំព័រមានសម្រាប់ឧបករណ៍ផ្សេងទៀតនៅលើ Wi-Fi ដូចគ្នា តាមអាសយដ្ឋាន និង port របស់កុំព្យូទ័ររបស់អ្នក។

ពិនិត្យរបស់ដែលតែងតែខូច៖ អត្ថបទអានបានដោយមិនចាំបាច់ពង្រីក មិនមានការ scroll ទៅចំហៀង tap target (link និងប៊ូតុង) ខ្ពស់យ៉ាងតិចប្រហែល 44px ជាមួយលំហរវាងពួកវា និង form ប្រើបានជាមួយក្តារចុចលើអេក្រង់។

9. ទំព័រ Profile ដែល Responsive

បន្ថែមទាំងនេះទៅចុងបញ្ចប់នៃ style.css៖

/* Skip link: hidden until focused */
.skip-link {
  position: absolute;
  left: -999px;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  padding: 0.5rem 1rem;
  background: var(--color-bg);
  z-index: 10;
}

/* Fluid heading */
h1 {
  font-size: clamp(1.75rem, 1.2rem + 3vw, 3rem);
  line-height: 1.2;
}

/* Base: phone. Stack the navbar links */
.nav-list {
  flex-direction: column;
  gap: 0.5rem;
}

.about {
  display: grid;
  gap: 1.5rem;
}

/* Tablet and up */
@media (min-width: 40rem) {
  .nav-list {
    flex-direction: row;
    gap: 1.5rem;
  }

  .about {
    grid-template-columns: 12rem 1fr;
    align-items: start;
  }
}

បន្ថែម class="skip-link" ទៅ link ដែលអ្នកបានបង្កើតនៅជំពូកទី 4។ បន្ទាប់មកសាកល្បងក្នុង device mode នៅ 360px, 768px និង 1280px។ Commit ការងាររបស់អ្នក។

10. បោះពុម្ពផ្សាយទៅ GitHub Pages

ទំព័ររបស់អ្នកគឺជា static site — file ធម្មតា គ្មានកូដ server (មើល Static Site, Web App និង API)។ GitHub អាចបង្ហោះវាដោយឥតគិតថ្លៃ។ បើអ្នកបានរៀនតាម Git និង GitHub សម្រាប់អ្នកចាប់ផ្តើម អ្នកបានធ្វើវារួចម្តងហើយ។

បង្កើត repository នៅលើ GitHub ដែលមានឈ្មោះ dara-profile ជា public ហើយគ្មាន README (folder របស់អ្នកមានប្រវត្តិរួចហើយ)។
តភ្ជាប់ និង push ពី project folder៖

git branch -M main
git remote add origin https://github.com/YOUR-USERNAME/dara-profile.git
git push -u origin main

នៅលើ GitHub សូមបើក repository → Settings → Pages។ ក្រោម Build and deployment សូមជ្រើសរើស Deploy from a branch branch main folder / (root) ហើយ save។
រង់ចាំមួយ ឬពីរនាទី។ ទំព័រផ្តល់អាសយដ្ឋានឲ្យអ្នក៖ https://YOUR-USERNAME.github.io/dara-profile/។

បើកវានៅលើទូរស័ព្ទរបស់អ្នក។ បើ CSS ឬរូបភាពបាត់ សូមពិនិត្យ path។ Site របស់អ្នកស្ថិតនៅក្រោម /dara-profile/ ដូច្នេះ សូមប្រើ relative path (style.css, images/dara.jpg) មិនមែន /style.css ទេ ដូចដែលបានរៀបរាប់នៅក្នុង URL ម្តងមួយផ្នែក។ ម្យ៉ាងទៀត ឈ្មោះ file ប្រកាន់អក្សរធំតូចនៅលើ server ទោះបីជាកុំព្យូទ័ររបស់អ្នកមិនប្រកាន់ក៏ដោយ៖ Dara.JPG និង dara.jpg គឺជា file ពីរផ្សេងគ្នា។

ដើម្បីធ្វើបច្ចុប្បន្នភាព site សូមកែ commit និង push — វា deploy ឡើងវិញដោយខ្លួនឯង៖

git add .
git commit -m "Improve mobile layout"
git push

11. ត្រួតពិនិត្យដោយ Lighthouse

ឥឡូវវាស់ការងាររបស់អ្នក។ នៅក្នុង Chrome DevTools សូមបើក Lighthouse ជ្រើសរើស Mobile ធីកគ្រប់ប្រភេទទាំងបួន ហើយចុច Analyze page load លើ URL ដែលអ្នកបានបោះពុម្ពផ្សាយ។ វាផ្តល់ពិន្ទុ៖

ប្រភេទ	មើលអ្វី
Performance	ល្បឿនផ្ទុក; ទំហំរូបភាព, font, file ដែលរារាំងការ render
Accessibility	Contrast, label, alt text, heading, landmark
Best Practices	HTTPS, គ្មាន console error, markup ទំនើប
SEO	Title, description, viewport, ភាពអាច crawl បាន

ទំព័រដូចរបស់អ្នកគួរតែទទួលបានពិន្ទុជិត 100 ក្នុងប្រភេទនីមួយៗ។ សូមអានអ្វីដែលត្រូវបានចង្អុលបង្ហាញ ហើយកែវា បន្ទាប់មកដំណើរការម្តងទៀត។ ការកែភាគច្រើន ដូចជា alt ដែលបាត់ contrast ទាប និងរូបភាពធំពេក គឺជារបស់ដែលអ្នកបានរៀនក្នុងស៊េរីនេះ។

12. ទៅទីណាបន្ទាប់

ឥឡូវអ្នកអាចសាងសង់ទំព័រពេញលេញ ដែលអាចចូលប្រើបាន និង responsive ពីសូន្យ។ របស់ខ្លះដែលហួសពីស៊េរីនេះ៖

JavaScript។ ធ្វើឲ្យទំព័រមានប្រតិកម្ម — ម៉ឺនុយដែលបើក form ដែលផ្ទៀងផ្ទាត់ មាតិកាដែលផ្ទុក។ នោះគឺជាស៊េរីបន្ទាប់នៅលើផែនទីបង្ហាញផ្លូវ៖ ចាប់ផ្តើមនៅទីនេះ។
CSS ដែលអ្នកអាចស្វែងរកពេលត្រូវការ៖ animation និង @keyframes, position: sticky, aspect-ratio, container query, :has()។
Framework ដូចជា Tailwind CSS។ ពួកវាសន្សំការវាយរបស់អ្នក ប៉ុន្តែពួកវាធ្វើឲ្យអ្នកលឿនតែនៅពេលអ្នកយល់ CSS ដែលនៅពីក្រោមប៉ុណ្ណោះ ដែលឥឡូវអ្នកយល់ហើយ។
Project ពិតមួយ។ បង្កើតទំព័រសម្រាប់មិត្តម្នាក់ អាជីវកម្មតូចមួយ ឬក្លឹបមួយ។ គ្មានអ្វីបង្រៀន CSS ដូចការសាងសង់អ្វីមួយសម្រាប់អ្នកដទៃឡើយ។

ឯកសារយោងដ៏ល្អបំផុតគឺ MDN Web Docs។ នៅពេលអ្នកភ្លេច property មួយ សូមស្វែងរកវានៅទីនោះ។

13. សាកល្បងដោយខ្លួនឯង

រក breakpoint។ បើកទំព័ររបស់អ្នកក្នុង device mode នៅ 320px បន្ទាប់មកអូសវាឲ្យធំជាងនេះ។ នៅទទឹងប៉ុន្មាន ដែលវាចាប់ផ្តើមមើលទៅលាតពេក ឬចង្អៀតពេក? ដាក់ media query នៅទីនោះ។
ស្វែងរក overflow។ នៅ 320px តើមាន scrollbar ផ្ដេកទេ? បើមាន សូមរក element ដែលបង្កឲ្យមានវាដោយប្រើ DevTools។
Mobile-first។ ពិនិត្យថា CSS របស់អ្នកត្រូវបានសរសេរដោយ query min-width និងមូលដ្ឋានមួយជួរឈរដ៏សាមញ្ញ។
សាកល្បងលើទូរស័ព្ទពិត។ បើកទំព័រនៅលើទូរស័ព្ទ។ ពិនិត្យទំហំអក្សរ tap target និង form ជាមួយក្តារចុចលើអេក្រង់។
បោះពុម្ពផ្សាយ និងចែករំលែក។ Push ទៅ GitHub Pages ដំណើរការ Lighthouse លើ URL ផ្ទាល់ ហើយកែពិន្ទុទាបបំផុត។
បោះពុម្ពវា។ បន្ថែម rule @media print ដែលលាក់ការរុករក បន្ទាប់មក print-preview ទំព័រ។
បង្ហាញនរណាម្នាក់។ ផ្ញើ link ទៅមិត្តម្នាក់។ សួរគេថាគេរកអ្វីមិនឃើញ។ នោះគឺជាការសាកល្បងដ៏ល្អបំផុត។

អ្នកបានចាប់ផ្តើមពី folder ទទេ ហើយបញ្ចប់ដោយ site ផ្ទាល់ដែលអ្នកបានសាងសង់ដោយខ្លួនឯង។ សូមបន្តសាងសង់។

Responsive Design និងការបោះពុម្ពផ្សាយ

ទិញកាហ្វេជូនខ្ញុំ