សំណួរសួរជាទូទៅនៅក្នុងការរចនាគេហទំព័រគឺ "តើអ្នកកំណត់កម្ពស់នៃវត្ថុទៅ 100% យ៉ាងដូចម្តេច?"
នេះហាក់ដូចជាចម្លើយងាយស្រួល។ អ្នកគ្រាន់តែប្រើ CSS ដើម្បីកំណត់កម្ពស់នៃធាតុទៅ 100% ប៉ុន្តែវាមិនតែងតែអូសធាតុនោះឱ្យសមនឹងបង្អួចកម្មវិធីរុករកទាំងមូលទេ។ ចូរស្វែងយល់ថាហេតុអ្វីបានជាវាកើតឡើងនិងអ្វីដែលអ្នកអាចធ្វើបានដើម្បីសម្រេចបាននូវចក្ខុវិស័យនេះ។
ភីកសែលនិងភាគរយ
នៅពេលអ្នកកំណត់កម្ពស់របស់ធាតុមួយដោយប្រើ លក្ខណសម្បត្តិ CSS និងតម្លៃដែលប្រើភីកសែលធាតុនោះនឹងយកកន្លែងបញ្ឈរច្រើននៅក្នុងកម្មវិធីរុករក។
ឧទាហរណ៍កថាខណ្ឌដែលមានកម្ពស់: 100px ។ នឹងយក 100 ភីចសែលនៃទំហំបញ្ឈរក្នុងការរចនារបស់អ្នក។ វាគ្មានបញ្ហាថាតើទំហំផ្ទាំងកម្មវិធីរុករករបស់អ្នកធំប៉ុនណាទេធាតុនេះនឹងមានកំពស់ 100 ភីកសែល។
ភាគរយធ្វើការខុសគ្នាពីភីកសែល។ យោងតាមការបញ្ជាក់របស់ W3C កម្ពស់ភាគរយត្រូវបានគេគណនាដោយគោរពតាមកំពស់របស់កុងតឺន័រ។ ដូច្នេះប្រសិនបើអ្នកដាក់កថាខណ្ឌដែលមានកម្ពស់: 50% ។ ក្នុងផ្នែកមួយជាមួយកម្ពស់ 100px កថាខណ្ឌនឹងមាន 50 ភីកសែលជាកម្ពស់ដែលជា 50% នៃធាតុរបស់មេ។
ហេតុអ្វីកំពស់ភាគរយបរាជ័យ?
ប្រសិនបើអ្នកកំពុងបង្កើតទំព័រវ៉ិបសាយមួយហើយអ្នកមានជួរឈរដែលអ្នកចង់យកកម្ពស់ពេញលេញនៃបង្អួចនោះទំនោរធម្មជាតិគឺត្រូវបន្ថែមកម្ពស់មួយ: 100%; ទៅធាតុនោះ។ យ៉ាងណាមិញប្រសិនបើអ្នកកំណត់ទទឹងទទឹង: 100%; ធាតុនឹងយកទំហំផ្ដេកពេញនៃទំព័រដូច្នេះកម្ពស់គួរតែដំណើរការដូចគ្នាមែនទេ? ជាអកុសលនេះមិនមែនជាករណីនៅទាំងអស់។
ដើម្បីយល់ពីមូលហេតុដែលវាកើតឡើងអ្នកត្រូវតែយល់ពីរបៀបដែលកម្មវិធីរុករកបកស្រាយកម្ពស់និងទទឹង។ កម្មវិធីរុករកបណ្តាញគណនាទទឹងសរុបដែលអាចប្រើបានជាមុខងារនៃរបៀបដែលបង្អួចកម្មវិធីបើកទូលាយ។ ប្រសិនបើអ្នកមិនកំណត់តម្លៃទទឹងណាមួយលើឯកសាររបស់អ្នកកម្មវិធីរុករកនឹងហូរមាតិកាដោយស្វ័យប្រវត្តិដើម្បីបំពេញទទឹងទាំងមូលនៃបង្អួច (ទទឹង 100% គឺជាលំនាំដើម) ។
តម្លៃកម្ពស់ត្រូវបានគណនាខុសពីទទឹង។ ការពិត, កម្មវិធីរុករកមិនវាយតម្លៃកម្ពស់ទាំងអស់លុះត្រាតែមាតិកាវែងពេកដែលវានៅខាងក្រៅផ្ទាំងទិដ្ឋភាព (ដូច្នេះតម្រូវឱ្យមានរបាររមូរ) ឬប្រសិនបើអ្នករចនាគេហទំព័រកំណត់កម្ពស់ដាច់ខាតសម្រាប់ធាតុនៅលើទំព័រ។ បើមិនដូច្នោះទេកម្មវិធីរុករកគ្រាន់តែអនុញ្ញាតិឱ្យលំហូរមាតិកានៅក្នុងទទឹងនៃ viewport រហូតដល់វាបញ្ចប់ទៅ។ កំពស់មិនត្រូវបានគណនាពិតទេ។
មានបញ្ហាកើតឡើងនៅពេលអ្នកកំណត់កម្ពស់ភាគរយលើធាតុមួយដែលមានធាតុមេដោយគ្មានកម្ពស់ - ក្នុងន័យផ្សេងទៀតធាតុមេមានកម្ពស់លំនាំដើម: auto; ។ តាមពិតអ្នកកំពុងស្នើកម្មវិធីរុករកដើម្បីគណនាកម្ពស់មួយពីតម្លៃដែលមិនបានកំណត់។ ព្រោះថាវាស្មើនឹងតម្លៃទទេលទ្ធផលគឺថាកម្មវិធីរុករកមិនធ្វើអ្វីទេ។
ប្រសិនបើអ្នកចង់កំណត់កម្ពស់លើទំព័របណ្ដាញរបស់អ្នកទៅជាភាគរយអ្នកត្រូវកំណត់កម្ពស់នៃធាតុមេ ទាំងអស់ របស់មួយដែលអ្នកចង់បានកំណត់កម្ពស់។ នៅក្នុងពាក្យផ្សេងទៀតប្រសិនបើអ្នកមានទំព័រដូចនេះ:
មាតិកានៅទីនេះ
អ្នកទំនងជាចង់អោយ div និងកថាខណ្ឌនៅក្នុងវាមានកម្ពស់ 100% ប៉ុន្តែចំនែកនោះមានធាតុមេ ពីរ :
និង។ ដើម្បីកំណត់កម្ពស់របស់ div ទៅកម្ពស់ដែលទាក់ទងអ្នកត្រូវតែកំណត់កម្ពស់តួនិងធាតុ html ផងដែរ។
ដូច្នេះអ្នកត្រូវប្រើ CSS ដើម្បីកំណត់កម្ពស់របស់មិនត្រឹមតែលេខសម្គាល់ប៉ុន្តែថែមទាំងធាតុរាងកាយនិងធាតុ html ផងដែរ។ នេះអាចជាបញ្ហាប្រឈមមួយពីព្រោះអ្នកអាចទទួលបាននូវអ្វីគ្រប់យ៉ាងដែលត្រូវបានកំណត់រហូតដល់ 100% កម្ពស់តែប៉ុណ្ណោះដើម្បីសម្រេចបាននូវប្រសិទ្ធិភាពដែលចង់បាន។
អ្វីដែលត្រូវកត់សម្គាល់នៅពេលធ្វើការជាមួយកម្ពស់ 100%
ឥឡូវអ្នកដឹងពីរបៀបកំណត់កម្ពស់ធាតុទំព័ររបស់អ្នកឱ្យ 100% វាអាចជារឿងគួរឱ្យរំភើបក្នុងការចេញនិងធ្វើវាទៅទំព័ររបស់អ្នកទាំងអស់ប៉ុន្តែមានរឿងមួយចំនួនដែលអ្នកគួរដឹង:
- រឹមនិងចន្លោះអាចបន្ថែមរបាររមូរមួយដែលអ្នកមិនចង់បាន។ រឿងមួយដែលគួរឱ្យរំជើបរំជួលបំផុតដែលខ្ញុំបានរកឃើញដោយធ្វើការជាមួយកម្ពស់ (និងទទឹង) គឺថាបន្ទាប់មកចន្លោះនិងរឹមនៅលើធាតុដូចគ្នាទាំងនោះអាចបន្ថែមរបាររមូរទៅទំព័រទោះបីជាមាតិកាទាំងអស់បង្ហាញដោយមិនចាំបាច់របាររមូរក៏ដោយ។ នេះដោយសារតែកម្ពស់ឬទទឹងនៃធាតុគឺជាវត្ថុទីមួយដែលត្រូវបានគណនា។ បន្ទាប់មករឹមនិងរុំត្រូវបានបន្ថែម។ ដូច្នេះប្រសិនបើអ្នកមានធាតុដែលមានកម្ពស់ 100% និងរឹមកំពូលនិងបាតនៃ 10 ភីកសែលនីមួយៗនោះវានឹងមានរបាររមូរសម្រាប់បន្ថែមភីកសែល 20 ។ សូមចាំថាម៉ូដែលប្រអប់ CSS បន្ថែមរឹមស៊ុមនិងផ្ទៃរាបស្មើទៅនឹងទំហំរបស់ធាតុដូច្នេះ 100% ជាមួយតម្លៃគំរូប្រអប់ផ្សេងទៀតទាំងអស់នោះនឹងមានច្រើនជាង 100% ។
- ប្រសិនបើមាតិការបស់អ្នកចំណាយពេលលើសពីកម្ពស់ដែលបានកំណត់វានឹងសរសេរជាន់លើអ្វីមួយបន្ទាប់ពីវា។ និយាយម្យ៉ាងទៀតប្រសិនបើអ្នកមានការរចនាជាមួយជួរឈរដែលមានកម្ពស់ 80% ហើយមាតិកាដែលនៅខាងក្នុងរបស់វានឹងឡើងដល់ 100% នៃកម្ពស់ដែលបន្ថែម 20% នឹងបន្តនៅខាងក្រោមជួរឈរនិងបំបែកការរចនាដែលមើលឃើញ។ នៃទំព័ររបស់អ្នក។ ប្រសិនបើមានមាតិកាខាងក្រោមជួរឈរនោះអត្ថបទនឹងសរសេរនៅលើកំពូលរបស់វា។ ជាញឹកញាប់ខ្ញុំឃើញវាកើតឡើងនៅពេលដែលអ្នករចនាគេហទំព័រព្យាយាមបង្ខំកម្ពស់ទំព័រនិងធ្វើឱ្យវាដំណើរការយ៉ាងល្អឥតខ្ចោះសម្រាប់ការបើកដំណើរការប៉ុន្តែនៅពេលខ្លឹមសារលើទំព័រនោះផ្លាស់ប្តូរនាពេលអនាគតកម្ពស់ដាច់ខាតធ្វើអោយលំហូរនៃទំព័រខូច។ នេះជាការពិតទ្វេដងនៅពេលអ្នកកំពុងបង្កើតវិបសាយឆ្លើយតបដែលទទឹងនិងកំពស់ត្រូវប្តូរជាមួយទំហំនៃទិដ្ឋភាព។
ដើម្បីជួសជុលនេះអ្នកអាចកំណត់កម្ពស់របស់ធាតុផងដែរ។ ប្រសិនបើអ្នកកំណត់វាដោយស្វ័យប្រវត្តិរបាររមូរនឹងលេចឡើងបើសិនជាពួកគេត្រូវការប៉ុន្តែបាត់នៅពេលដែលវាមិនមាន។ ដែលជួសជុលការសម្រាកដែលមើលឃើញប៉ុន្តែវាបន្ថែម scrollbars ដែលអ្នកមិនអាចចង់បាន។
ប្រើគ្រឿងទិដ្ឋភាព
វិធីមួយទៀតដែលអ្នកអាចដោះស្រាយបញ្ហានេះគឺដើម្បីសាកល្បងជាមួយ CSS Viewport Units ។ ដោយប្រើរង្វាស់នៃ កម្ពស់ នៃការមើលអ្នកអាចធ្វើមាត្រដ្ឋានធាតុដើម្បីចាប់យកកម្ពស់ដែលបានកំណត់នៃទិដ្ឋភាពហើយវានឹងផ្លាស់ប្តូរនៅពេលដែលផ្ទាំងត្រលប់មកផ្លាស់ប្តូរ! នេះជាវិធីដ៏ល្អមួយដើម្បីទទួលបានរូបភាពដែលមានកំពស់ 100% នៅលើទំព័រប៉ុន្តែនៅតែមានភាពបត់បែនសម្រាប់ឧបករណ៍ផ្សេងៗនិងទំហំអេក្រង់។