ស្វែងយល់ពីរបៀបដែលកម្មវិធីរុករកអ៊ីនធឺណិតកំណត់ការបង្ហាញដោយប្រើភាគរយ
និស្សិតជាច្រើននៃ ការរចនាបណ្ដាញឆ្លើយតប មានពេលវេលាលំបាកដោយប្រើភាគរយសម្រាប់តម្លៃទទឹង។ ជាពិសេសមានការយល់ច្រឡំជាមួយវិធីដែលកម្មវិធីរុករកគណនាភាគរយទាំងនោះ។ ខាងក្រោមនេះអ្នកនឹងរកឃើញការពន្យល់លម្អិតអំពីរបៀបដែលភាគរយធ្វើការសម្រាប់ការគណនាទទឹងនៅក្នុងគេហទំព័រឆ្លើយតប។
ការប្រើភីកសែលសម្រាប់តម្លៃទទឹង
នៅពេលអ្នកប្រើភីកសែលជាតម្លៃទទឹងលទ្ធផលគឺមានភាពសាមញ្ញ។ ប្រសិនបើអ្នកប្រើ CSS ដើម្បីកំណត់តម្លៃទទឹងរបស់ធាតុក្នុងបឋមកថានៃឯកសារទៅទទឹង 100 ភីកសែលធាតុនោះនឹងមានទំហំដូចគ្នាមួយដែលអ្នកកំណត់ទទឹង 100 ភីកសែលនៅក្នុងមាតិកាឬបាតកថារបស់តំបន់បណ្ដាញឬតំបន់ផ្សេងទៀតនៃគេហទំព័រ។ ទំព័រ។ ភីចសែលគឺជាតម្លៃដាច់ខាតដូច្នេះ 100 ភីចសែលគឺ 100 ភីកសែលមិនថានៅកន្លែងណាដែលឯកសាររបស់អ្នកលេចឡើងទេ។ ជាអកុសលខណៈពេលដែលតម្លៃភីកសែលងាយស្រួលក្នុងការយល់ដឹងពួកគេមិនដំណើរការល្អនៅក្នុងគេហទំព័រដែលឆ្លើយតប។
លោក Ethan Marcotte បានបង្កើតពាក្យ "ការរចនាតាមបណ្ដាញឆ្លើយតប" ដោយពន្យល់អំពីវិធីសាស្រ្តនេះដែលមានគោលការណ៍សំខាន់ៗចំនួន 3:
- ក្រឡាចត្រង្គរាវ
- ប្រព័ន្ធផ្សព្វផ្សាយទឹក
- សំណួរប្រព័ន្ធផ្សព្វផ្សាយ
ចំណុចពីរដំបូងដែលប្រព័ន្ធទឹកនិងប្រព័ន្ធសារធាតុរាវត្រូវបានសម្រេចដោយប្រើភាគរយជំនួសឱ្យភីកសែលដើម្បីកំណត់តម្លៃ។
ប្រើភាគរយសម្រាប់តម្លៃទទឹង
នៅពេលអ្នកប្រើភាគរយដើម្បីបង្កើតទទឹងសម្រាប់ធាតុមួយទំហំពិតប្រាកដដែលធាតុបង្ហាញនៅនឹងប្រែប្រួលអាស្រ័យលើកន្លែងដែលវាស្ថិតនៅក្នុងឯកសារ។ ភាគរយគឺជាតម្លៃដែលទាក់ទងមានន័យថាទំហំដែលបង្ហាញគឺទាក់ទងទៅនឹងធាតុផ្សេងទៀតនៅក្នុងឯកសាររបស់អ្នក។
ឧទាហរណ៍ប្រសិនបើអ្នកកំណត់រូបភាពទទឹង 50% វាមិន មានន័យថារូបភាពនឹងបង្ហាញនៅពាក់កណ្តាលទំហំធម្មតារបស់វា។ នេះគឺជាការយល់ច្រឡំទូទៅ។
ប្រសិនបើរូបភាពមានទទឹង 600 ភីចសែលបន្ទាប់មកប្រើតម្លៃ CSS ដើម្បីបង្ហាញវានៅ 50% មិនមានន័យថាវាមាន 300 ភិចសែលនៅក្នុងវេបសាយទេ។ តម្លៃភាគរយនេះត្រូវបានគណនាដោយផ្អែកលើធាតុដែលមានរូបភាពនោះមិនមែនទំហំដើមរបស់រូបភាពនោះទេ។ ប្រសិនបើឧបករណ៍ផ្ទុក (ដែលអាចជាផ្នែកមួយឬធាតុផ្សេងទៀតរបស់ HTML មួយ) មានទទឹង 1000 ភីកសែលបន្ទាប់មករូបភាពនឹងបង្ហាញនៅ 500 ភិចសែលចាប់តាំងពីតម្លៃនោះ 50% នៃទទឹងរបស់ធុង។ ប្រសិនបើធាតុមានទទឹង 400 ភីចសែលនោះរូបភាពនឹងបង្ហាញតែ 200 ភីកសែលព្រោះតម្លៃនោះគឺ 50% នៃធុង។ រូបភាពនៅក្នុងសំណួរនៅទីនេះមានទំហំ 50% ដែលពឹងផ្អែកទាំងស្រុងលើធាតុដែលមានវា។
ចងចាំ, ការរចនាឆ្លើយតបគឺរាវ។ ប្លង់និងទំហំនឹងផ្លាស់ប្តូរនៅពេល ដែលទំហំអេក្រង់ / ឧបករណ៍ផ្លាស់ប្តូរ ។ ប្រសិនបើអ្នកគិតអំពីរឿងនេះក្នុងរូបរាងខាងក្រៅរបស់រាងកាយវាហាក់ដូចជាមានប្រអប់ក្រដាសកាតុងធ្វើកេសដែលអ្នកបំពេញដោយសម្ភារៈវេចខ្ចប់។ ប្រសិនបើអ្នកនិយាយថាប្រអប់គួរតែត្រូវបានបំពេញពាក់កណ្តាលដោយសម្ភារៈនោះបរិមាណនៃការវេចខ្ចប់ដែលអ្នកត្រូវការនឹងប្រែប្រួលអាស្រ័យលើទំហំនៃប្រអប់។ ដូចគ្នានឹងភាពច្បាស់លាស់ចំពោះទំហំវិមាត្រក្នុងការរចនាគេហទំព័រ។
ភាគរយផ្អែកលើភាគរយផ្សេងទៀត
ក្នុងឧទាហរណ៍រូបភាព / កុងតឺន័រខ្ញុំបានប្រើតម្លៃភីកសែលសម្រាប់ធាតុដែលមានដើម្បីបង្ហាញពីរបៀបរូបភាពឆ្លើយតបនឹងបង្ហាញ។ នៅក្នុងធាតុពិតធាតុដែលនឹងត្រូវបានកំណត់ទៅជាភាគរយហើយរូបភាពឬធាតុផ្សេងទៀតនៅក្នុងធុងនោះនឹងទទួលបានតម្លៃរបស់ពួកគេដោយផ្អែកលើភាគរយនៃភាគរយ។
នេះជាឧទាហរណ៍មួយទៀតដែលបង្ហាញពីការអនុវត្តនេះ។
និយាយថាអ្នកមានវែបសាយដែលវែបសាយត៍ទាំងមូលមាននៅក្នុងផ្នែកមួយជាមួយថ្នាក់នៃ "ធុង" ។ នៅក្នុងផ្នែកនោះគឺជាការបែងចែក 3 ផ្សេងទៀតដែលអ្នកនឹងបង្ហាញរចនាប័ទ្មដើម្បីបង្ហាញជាជួរឈរបញ្ឈរ 3 ។ HTML នោះមើលទៅដូចនេះ:
ឥឡូវអ្នកអាចប្រើ CSS ដើម្បីកំណត់ទំហំនៃ "កុងតឺន័រ" ដែលនិយាយថា 90% ។ ក្នុងឧទាហរណ៍នេះផ្នែកកុងតឺន័រមិនមានធាតុផ្សេងទៀតដែលព័ទ្ធជុំវិញវាក្រៅពីតួដែលយើងមិនបានកំណត់តម្លៃជាក់លាក់ណាមួយទេ។ តាមលំនាំដើមរាងកាយនឹងបង្ហាញជា 100% នៃបង្អួចកម្មវិធីរុករក។ ហេតុនេះភាគរយនៃការបែងចែក "កុងតឺន័រ" នឹងផ្អែកលើទំហំនៃបង្អួចកម្មវិធីអ៊ីនធឺណិត។ ដូចដែលផ្ទាំងវិនដូកម្មវិធីរុករកមានការផ្លាស់ប្តូរទំហំដូច្នេះទំហំនៃ "ឧបករណ៍ផ្ទុក" នេះ។ ដូច្នេះបើបង្អួចកម្មវិធីរុករកមានទំហំ 2000 ភីចសែលផ្នែកនេះនឹងបង្ហាញនៅ 1800 ភីកសែល។ នេះត្រូវបានគណនា 90 ភាគរយនៃ 2000 (2000 x .90 = 1800)) ដែលជាទំហំនៃកម្មវិធីរុករក។
ប្រសិនបើផ្នែកនីមួយៗនៃផ្នែក "col" ត្រូវបានរកឃើញនៅក្នុង "container" ត្រូវបានកំណត់ទំហំ 30% នោះគេនឹងមានទំហំ 540 pixels ក្នុងឧទាហរណ៍នេះ។ នេះត្រូវបានគណនា 30% នៃ 1800 ភីកសែលដែលធុងបញ្ចេញនៅ (1800 x .30 = 540) ។ ប្រសិនបើយើងប្តូរភាគរយនៃកុងតឺន័រនោះការបែងចែកផ្នែកខាងក្នុងទាំងនេះក៏នឹងផ្លាស់ប្តូរទំហំដែលវាបង្ហាញផងដែរដោយសារតែវាពឹងផ្អែកលើធាតុនោះ។
ចូរសន្មត់ថាបង្អួចកម្មវិធីរុករកនៅតែមានទំហំ 2000 ភីចសែលប៉ុន្តែយើងផ្លាស់ប្តូរតម្លៃភាគរយនៃកុងតឺន័រទៅ 80% ជំនួសឱ្យ 90% ។ នោះមានន័យថាវានឹងបង្ហាញនៅទំហំ 1600 ភិចសែលឥឡូវនេះ (2000 x .80 = 1600) ។ ទោះបីជាយើងមិនផ្លាស់ប្តូរ CSS សម្រាប់ទំហំនៃការបែងចែក 3 របស់យើងហើយទុកវាឱ្យនៅ 30 ភាគរយក៏ដោយពួកគេនឹងបង្ហាញខុសគ្នាព្រោះថាធាតុដែលមានធាតុផ្សំដែលជាបរិបទដែលពួកវាមានទំហំបានផ្លាស់ប្តូរ។ ការបែងចែកទាំង 3 នោះនឹងមានទំហំ 480 ភីចសែលដែលមានទំហំ 30% នៃ 1600 ឬទំហំនៃកុងតឺន័រ (1600 x .30 = 480) ។
ការយកវាទៅបន្ថែមទៀតប្រសិនបើមានរូបភាពមួយនៅផ្នែកមួយនៃការបែងចែក "col" ទាំងនេះហើយរូបភាពនោះមានទំហំដោយប្រើភាគរយដូច្នេះបរិបទសម្រាប់ទំហំរបស់វានឹងជា "កូឡែក" ។ ដោយសារថាផ្នែក "col" បានផ្លាស់ប្តូរទំហំដូច្នេះរូបភាពនៅខាងក្នុងនោះ។ ដូច្នេះប្រសិនបើទំហំនៃកម្មវិធីរុករកឬ "កុងតឺន័រ" ត្រូវបានផ្លាស់ប្តូរនោះវានឹងប៉ះពាល់ដល់ការបែកខ្ញែក "col" ចំនួនបីដែលនឹងផ្លាស់ប្តូរទំហំនៃរូបភាពនៅខាងក្នុង "col" ។ ដូចដែលអ្នកបានឃើញវាទាំងអស់ត្រូវបានភ្ជាប់នៅពេល វាបានមកពីតម្លៃភាគរយជំរុញ។
នៅពេលអ្នកពិចារណាអំពីរបៀបដែលធាតុនៅខាងក្នុងនៃគេហទំព័រនឹងបង្ហាញនៅពេលតម្លៃភាគរយត្រូវបានប្រើសម្រាប់ទទឹងរបស់វាអ្នកត្រូវយល់អំពីបរិបទដែលធាតុនោះស្ថិតនៅក្នុងការសម្គាល់របស់ទំព័រ។
សរុបមក
ភាគរយបានដើរតួនាទីយ៉ាងសំខាន់នៅក្នុងការបង្កើតប្លង់សម្រាប់ គេហទំព័រឆ្លើយតប ។ មិនថាអ្នកកំពុងកំណត់ទំហំរូបភាពឬប្រើទទឹងភាគរយដើម្បីបង្កើតក្រឡាចត្រង្គរាវដែលមានទំហំទាក់ទងគ្នានោះការយល់ដឹងពីការគណនាទាំងនេះនឹងចាំបាច់ដើម្បីសម្រេចបាននូវរូបរាងដែលអ្នកចង់បាន។