You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
126 lines
14 KiB
126 lines
14 KiB
# កិច្ចការផ្លាស់ប្តូររចនាសម្ព័ន្ធ CSS
|
|
|
|
## គោលដៅ
|
|
|
|
ផ្លាស់ប្តូរគម្រោង terrarium របស់អ្នក ដើម្បីប្រើបច្ចេកវិទ្យារចនាសម្ព័ន្ធ CSS ម៉ូដដែល! បម្លែងវិធីសាស្រ្តកំណត់តំណែងអប្បបរមា (absolute positioning) បច្ចុប្បន្នក្នុងការអនុវត្ត **Flexbox** ឬ **CSS Grid** សម្រាប់រចនាបទដែលអាចថែរក្សា បានងាយ និងមានការឆ្លើយតបល្អ។ កិច្ចការនេះធ្វើឱ្យអ្នកមានការប្រឈមក្នុងការអនុវត្តស្ដង់ដារផ្នែក CSS ថ្មីៗ ខណៈបន្តរក្សាសម្រស់ភ្នាក់ងាររបស់ terrarium របស់អ្នក។
|
|
|
|
ការយល់ដឹងពីពេលវេលានិងវិធីសាស្រ្តប្រើការរចនា layout ខុសៗគ្នា គឺជាទំនុកចិត្តមួយសំខាន់សម្រាប់ការអភិវឌ្ឍវែបសម័យថ្មី។ ការហាត់នេះជាស្ពានភ្ជាប់វិធីសាស្រ្តកំណត់តំណែងចាស់ៗជាមួយប្រព័ន្ធរចនាសម្ព័ន្ធ CSS បច្ចុប្បន្ន។
|
|
|
|
## សេចក្តីណែនាំសម្រាប់កិច្ចការ
|
|
|
|
### ជំហានទី 1: វិភាគ និង គម្រោង
|
|
1. **ពិនិត្យកូដ terrarium បច្ចុប្បន្នរបស់អ្នក** - ស្វែងរកធាតុដែលកំពុងប្រើកំណត់តំណែងអប្បបរមា
|
|
2. **ជ្រើសរើសវិធីសាស្រ្តរចនា layout របស់អ្នក** - សម្រេចថាតើ Flexbox ឬ CSS Grid ត្រូវគ្នាជាងសម្រាប់គោលដៅរចនារបស់អ្នក
|
|
3. **គូររចនាសម្ព័ន្ធ layout ថ្មីរបស់អ្នក** - វិភាគពីរបៀបដាក់តំណែងកុងត្ន័រនិងធាតុរុក្ខជាតិ
|
|
|
|
### ជំហានទី 2: អនុវត្ត
|
|
1. **បង្កើតកំណែថ្មី** នៃគម្រោង terrarium របស់អ្នកនៅថតថ្មីមួយ
|
|
2. **ធ្វើបច្ចុប្បន្នភាពរចនាសម្ព័ន្ធ HTML** តាមតម្រូវ ដើម្បីគាំទ្រវិធីសាស្រ្តរចនារបស់អ្នកជ្រើសរើស
|
|
3. **ផ្លាស់ប្តូរ CSS** ដើម្បីប្រើ Flexbox ឬ CSS Grid ជំនួសការកំណត់តំណែងអប្បបរមា
|
|
4. **រក្សាសមាមាត្ររូបភាព** - រក្សាការបង្ហាញរុក្ខជាតិ និងចាន terrarium នៅតំណែងដដែល
|
|
5. **អនុវត្តចម្លើយបត់បែន** - រចនាសម្ព័ន្ធរបស់អ្នកគួរតែអាចបត់បែនឱ្យសម្រួលទៅទំហំអេក្រង់ខុសៗគ្នា
|
|
|
|
### ជំហានទី 3: សាកល្បង និង ឯកសារព័ត៌មាន
|
|
1. **សាកល្បងក្នុងកម្មវិធីរុករក** - បញ្ជាក់ថារចនារបស់អ្នកដំណើរការល្អនៅក្នុង Chrome, Firefox, Edge និង Safari
|
|
2. **សាកល្បងចម្លើយបត់បែន** - ពិនិត្យរចនារបស់អ្នកនៅលើទូរស័ព្ទចល័ត, ថេប្លេត និងកុំព្យូទ័រឡេបតុប
|
|
3. **ឯកសារព័ត៌មាន** - បន្ថែមមតិយោបល់ទៅ CSS របស់អ្នកដើម្បីពន្យល់ពីជម្រើសរចនា
|
|
4. **ថតរូបអេក្រង់** - ចាប់ផ្តើម terrarium របស់អ្នកនៅក្នុងកម្មវិធីរុករកនិងទំហំអេក្រង់ផ្សេងៗ
|
|
|
|
## កម្រិតបច្ចេកទេសត្រូវការ
|
|
|
|
### ការអនុវត្តរចនាសម្ព័ន្ធ
|
|
- **ជ្រើសរើស១យ៉ាង**: អនុវត្ត Flexbox ឬ CSS Grid (មិនប្រើពីរទាំងពីរជាមួយធាតុដូចគ្នា)
|
|
- **រចនារឆ្លើយតប**: ប្រើឯកតាដូចជា (`rem`, `em`, `%`, `vw`, `vh`) ជំនួស pixels កំណត់ថេរ
|
|
- **ចូលដំណើរការ**: រក្សារចនាសម្ព័ន្ធ HTML មានអត្ថន័យ និងអត្ថបទ alt ដូចគ្នា
|
|
- **គុណភាពកូដ**: ប្រើឈ្មោះសម្គាល់រួមគ្នានិងចាត់តាំង CSS យ៉ាងសមរម្យ
|
|
|
|
### លក្ខណៈ CSS ម៉ូដែលដើម្បីបញ្ចូល
|
|
```css
|
|
/* Example Flexbox approach */
|
|
.terrarium-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.plant-containers {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
}
|
|
|
|
/* Example Grid approach */
|
|
.terrarium-layout {
|
|
display: grid;
|
|
grid-template-columns: 1fr 3fr 1fr;
|
|
grid-template-rows: auto 1fr;
|
|
min-height: 100vh;
|
|
gap: 1rem;
|
|
}
|
|
```
|
|
|
|
### តម្រូវការគាំទ្រកម្មវិធីរុករក
|
|
- **Chrome/Edge**: ចុងក្រោយ ២ កំណែ
|
|
- **Firefox**: ចុងក្រោយ ២ កំណែ
|
|
- **Safari**: ចុងក្រោយ ២ កំណែ
|
|
- **កម្មវិធីរុករកលើទូរស័ព្ទ**: iOS Safari, Chrome Mobile
|
|
|
|
## ឯកសារដែលត្រូវឲ្យប្រគល់
|
|
|
|
1. **ឯកសារ HTML បច្ចុប្បន្នភាព** ជាមួយរចនាសម្ព័ន្ធសម្រួលធំ
|
|
2. **ឯកសារ CSS បានផ្លាស់ប្តូរ** ប្រើបច្ចេកទេសរចនាសម្ព័ន្ធម៉ូដ។
|
|
3. **បណ្ណាល័យថតរូបអេក្រង់** បង្ហាញការចូលគ្នានៃកម្មវិធីរុករក:
|
|
- មើលលើកុំព្យូទ័រ (1920x1080)
|
|
- មើលលើថេប្លេត (768x1024)
|
|
- មើលលើទូរស័ព្ទចល័ត (375x667)
|
|
- យ៉ាងហោចណាស់ ២កម្មវិធីរុករកផ្សេងគ្នា
|
|
4. **ឯកសារ README.md** បង្ហាញសេចក្តីហេតុផលជ្រើសរើសរចនា (Flexbox ឬ Grid) និងហេតុផល
|
|
- បញ្ហាសម្រេចក្នុងពេលផ្លាស់ប្តូរ
|
|
- កំណត់សម្គាល់ការចូលរួមកម្មវិធីរុករក
|
|
- សេចក្តីណែនាំក្នុងការបញ្ជួរកូដរបស់អ្នក
|
|
|
|
## វិច្ឆ័យការវាយតម្លៃ
|
|
|
|
| កម្រិត | អតិភាព (4) | បរិញ្ញាបត្រ (3) | កំពុងអភិវឌ្ឍ (2) | ចាប់ផ្តើម (1) |
|
|
|----------|-------------|------------------|------------------|---------------|
|
|
| **ការអនុវត្តរចនា layout** | ប្រើខ្លាំង Flexbox/Grid ជាមួយលក្ខណៈវាងវៃ; រចនារឆ្លើយតបពេញលេញ | អនុវត្តត្រឹមត្រូវ ជាមួយរចនារឆ្លើយតបល្អ | អនុវត្តមូលដ្ឋាន មានបញ្ហារចនារឆ្លើយតបតិច | ការអនុវត្តរចនា layout មិនពេញលេញ ឬខុស |
|
|
| **គុណភាពកូដ** | CSS ស្អាត រៀបចំល្អ មានមតិយោបល់មានន័យ និងឈ្មោះធម្មតា | រៀបចំបានល្អ មានមតិយោបល់ខ្លះ | រៀបចំបានត្រឹមត្រូវ មានការចង្អុលខ្លះ | រៀបចំខ្សោយ ធ្វើអោយស្មុគស្មាញក្នុងការយល់ |
|
|
| **ភាពឆបគ្នាក្នុងកម្មវិធីរុករក** | មានភាពស្របគ្នាទាំងអស់ជំនួយដោយថតរូបអេក្រង់ | មានភាពឆបគ្នាល្អ បញ្ជាក់បញ្ហានៅកម្រិតតូច | មានបញ្ហាភាពឆបគ្នាដែលមិនប៉ះពាល់មុខងារ | មានបញ្ហាធំ ឬខ្វះការសាកល្បង |
|
|
| **រចនារឆ្លើយតប** | វិធីសាស្រ្តម៉ូប៊ីល-ផ្តើមល្អ ជាមួយចំណុចឆក់ខ្សែភាពយន្ដទន់ | រចនារឆ្លើយតបល្អ ជាមួយចំណុចឆក់សមរម្យ | រចនាមូលដ្ឋាន មានបញ្ហារចនារឆ្លើយតប | រចនារឆ្លើយតបមានកំណត់ ឬខូចខាត |
|
|
| **ឯកសារព័ត៌មាន** | README ពេញលេញ មានពន្យល់លម្អិត និងយល់ដឹង | ឯកសារយ៉ាងល្អគ្របដណ្តប់ទាំងអស់ | ឯកសារមូលដ្ឋាន មានការពន្យល់តិច | ឯកសារខ្វះ ឬមិនមាន |
|
|
|
|
## ឧបករណ៍ជួយ
|
|
|
|
### មេរៀនវិធីសាស្រ្តរចនា layout
|
|
- 📖 [មេរៀនពេញលេញអំពី Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
|
|
- 📖 [មេរៀនពេញលេញអំពី CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
|
|
- 📖 [Flexbox នឹង Grid - ជ្រើសឧបករណ៍ត្រឹមត្រូវ](https://blog.webdevsimplified.com/2022-11/flexbox-vs-grid/)
|
|
|
|
### ឧបករណ៍សាកល្បងកម្មវិធីរុករក
|
|
- 🛠️ [ម៉ូដឆ្លើយតប DevTools របស់កម្មវិធីរុករក](https://developer.chrome.com/docs/devtools/device-mode/)
|
|
- 🛠️ [Can I Use - គាំទ្រលក្ខណៈពិសេស](https://caniuse.com/)
|
|
- 🛠️ [BrowserStack - សាកល្បងគន្លងកម្មវិធីរុករក](https://www.browserstack.com/)
|
|
|
|
### ឧបករណ៍គុណភាពកូដ
|
|
- ✅ [CSS Validator](https://jigsaw.w3.org/css-validator/)
|
|
- ✅ [HTML Validator](https://validator.w3.org/)
|
|
- ✅ [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)
|
|
|
|
## បញ្ហាបន្ថែម
|
|
|
|
🌟 **រចនាលំនាំបច្ចេកទេស**: អនុវត្តទាំង Flexbox និង Grid នៅផ្នែកផ្សេងៗនៃរចនារបស់អ្នក
|
|
🌟 **បញ្ចូលកម្មវិធីចលនា**: បន្ថែមការផ្លាស់ប្តូរឬចលនាដែលដំណើរការជាមួយ layout ថ្មីរបស់អ្នក
|
|
🌟 **របៀបខ្មៅ**: អនុវត្តអ្នកប្តូរមុខងារធ្វើពីលក្ខណ: CSS custom properties
|
|
🌟 **ការសួរក្រោមកុងតឺន័រ**: ប្រើបច្ចេកវិទ្យារចនាក្រោម container query សម្រាប់ភាពឆ្លើយតបនៅកម្រិតធាតុ
|
|
|
|
> 💡 **ចងចាំ**: គោលបំណងមិនមែនគ្រាន់តែធ្វើឲ្យវាដំណើរការ ប៉ុន្តែគឺយល់ថា ហេតុអ្វីបានជាវិធីសាស្រ្តរចនារបស់អ្នកជ្រើសរើសគឺជាចម្លើយល្អបំផុតសម្រាប់បញ្ហារចនានេះ!
|
|
|
|
---
|
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
|
**ប្រកាសលើកលែង**៖
|
|
ឯកសារនេះត្រូវបានបកប្រែដោយប្រើសេវាកម្មបកប្រែ AI [Co-op Translator](https://github.com/Azure/co-op-translator)។ ទោះបីយើងខិតខំសម្រាប់ភាពត្រឹមត្រូវ ក៏សូមយកចិត្តទុកដាក់ថាការបកប្រែដោយស្វ័យប្រវត្តិអាចមានកំហុសឬភាពមិនត្រឹមត្រូវ។ ឯកសារដើមក្នុងភាសាមានដើមគួរត្រូវបានគេចាត់ទុកជាធនធានដ៏មានអំណាច។ សម្រាប់ព័ត៌មានសំខាន់ៗ ដាក់សំណើរសូមប្រើការបកប្រែដោយមនុស្សជំនាញ។ យើងមិនទទួលខុសត្រូវចំពោះការយល់ច្រឡំ ឬការបកប្រែខុសណាមួយដែលកើតមានពីការប្រើប្រាស់បកប្រែនេះទេ។
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER END --> |