តើអ្នកសរសេរសំណួរប្រព័ន្ធផ្សព្វផ្សាយ CSS ដោយរបៀបណា?

វាក្យសម្ព័ន្ធសម្រាប់សំណួរមេឌៀទទឹងនិងទទឹងទាំងពីរ

ការរចនាគេហទំព័រឆ្លើយតប គឺជាវិធីសាស្រ្តក្នុងការកសាងគេហទំព័រដែលទំព័រទាំងនោះអាចផ្លាស់ប្តូរប្លង់និងរូបរាងថាមវន្តរបស់ពួកគេ ដោយផ្អែកលើទំហំអេក្រង់របស់អ្នកទស្សនា ។ អេក្រង់ធំអាចទទួលបានរូបរាងសមស្របទៅនឹងរូបភាពធំ ៗ ទាំងនោះខណៈពេលដែលឧបករណ៍តូចៗដូចជាទូរស័ព្ទចល័តអាចទទួលបានវែបសាយដូចគ្នានឹងទ្រង់ទ្រាយដែលសមស្របសម្រាប់អេក្រង់តូចៗនោះ។ វិធីសាស្រ្តនេះផ្តល់នូវបទពិសោធអ្នកប្រើល្អប្រសើរជាងមុនសម្រាប់អ្នកប្រើទាំងអស់ហើយវាក៏អាចជួយ បង្កើនចំណាត់ថ្នាក់ម៉ាស៊ីនស្វែងរក ។ ផ្នែកដ៏សំខាន់មួយនៃការរចនាគេហទំព័រឆ្លើយតបគឺសំណួរ CSS Media ។

សំណួរប្រព័ន្ធផ្សព្វផ្សាយគឺដូចសេចក្តីថ្លែងការណ៍លក្ខខណ្ឌតិចតួចនៅក្នុងឯកសារ CSS របស់តំបន់បណ្ដាញរបស់អ្នកដែលអនុញ្ញាតឱ្យអ្នកកំណត់ក្បួន CSS ជាក់លាក់ដែលនឹងទទួលយកផលប៉ះពាល់នៅពេលដែលលក្ខខណ្ឌជាក់លាក់មួយត្រូវបានជួបប្រជុំគ្នាដូចជានៅពេលទំហំអេក្រង់ខ្ពស់ជាងឬខាងក្រោមកម្រិតជាក់លាក់។

សំណួរឃោសនាក្នុងសកម្មភាព

ដូច្នេះតើអ្នកប្រើសំណួរប្រព័ន្ធផ្សព្វផ្សាយតាមគេហទំព័រយ៉ាងដូចម្តេច? នេះគឺជាឧទាហរណ៍សាមញ្ញបំផុតមួយ:

1. អ្នកនឹងចាប់ផ្តើមជាមួយនឹងឯកសារ HTML ដែលមានរចនាសម្ព័ន្ធយ៉ាងល្អឥតខ្ចោះនៃរចនាប័ទ្មណាមួយដែលមើលឃើញ (នោះគឺ CSS សម្រាប់)
2. នៅក្នុងឯកសារ CSS របស់អ្នកអ្នកនឹងចាប់ផ្តើមដូចដែលអ្នកធ្វើធម្មតាដោយធ្វើរចនាប័ទ្មទំព័រនិងកំណត់បន្ទាត់មូលដ្ឋានមួយសម្រាប់របៀបដែលវេបសាយនឹងមើលទៅ។ និយាយថាអ្នកចង់បានទំហំពុម្ពអក្សរនៃទំព័រ 16 ភីចស៍អ្នកអាចសរសេរ CSS: body {size: 16px; }
3. ឥឡូវនេះអ្នកប្រហែលជាចង់បង្កើនទំហំពុម្ពអក្សរសម្រាប់អេក្រង់ធំជាងមុនដែលមានអចលនទ្រព្យច្រើនដើម្បីធ្វើដូច្នេះ។ នេះជាកន្លែងដែលការសួររបស់អ្នកប្រើចាប់ផ្តើម។ អ្នកនឹងចាប់ផ្ដើមការសួរបែបមេត្រីបែបដូចនេះ: @media screen និង (min-width: 1000px) {}
4. នេះជាវាក្យសម្ព័ន្ធរបស់ Query Media ។ វាចាប់ផ្ដើមជាមួយ @media ដើម្បីបង្កើតសំណួរមេឌាដោយខ្លួនឯង។ បន្ទាប់អ្នកកំណត់ "ប្រភេទមេឌៀ" ដែលក្នុងករណីនេះគឺ "អេក្រង់" ។ នេះត្រូវបានអនុវត្តទៅអេក្រង់កុំព្យូទ័រផ្ទៃតុកុំព្យូទ័រថេប្លេតទូរស័ព្ទ។ ល។ ទីបំផុតអ្នកបញ្ចប់ការស្ទង់មតិរបស់ប្រព័ន្ធផ្សព្វផ្សាយជាមួយ "លក្ខណៈពិសេសមេឌៀ" ។ នៅក្នុងឧទាហរណ៍របស់យើងខាងលើនេះគឺ "ទទឹងកណ្តាល: 1000px" ។ នេះមានន័យថាសំណួរប្រព័ន្ធផ្សព្វផ្សាយនឹងចាប់ផ្តើមសម្រាប់ការបង្ហាញដែលមានទទឹងអប្បបរមានៃទទឹង 1000 ភីកសែល។

1. បន្ទាប់ពីធាតុផ្សំទាំងនេះនៃការសួរមេឌាអ្នកបន្ថែមការបើកនិងបិទវង់ក្រចកដែលស្រដៀងនឹងអ្វីដែលអ្នកនឹងធ្វើនៅក្នុងក្បួន CSS ធម្មតាណាមួយ។
2. ជំហានចុងក្រោយទៅសំណួរប្រព័ន្ធផ្សព្វផ្សាយគឺដើម្បីបន្ថែមច្បាប់ CSS ដែលអ្នកចង់អនុវត្តនៅពេលដែលលក្ខខណ្ឌនេះត្រូវបានបំពេញ។ អ្នកបន្ថែមច្បាប់ CSS ទាំងនេះរវាងដង្កៀបអង្កាញ់ដែលបង្កើតជាសំណួរមេឌាដូចនេះ: @media screen និង (min-width: 1000px) {body {font-size: 20px; }
3. នៅពេលដែលលក្ខខណ្ឌនៃការស្វែងរកមេត្រីត្រូវបានឆ្លើយតប (បង្អួចកម្មវិធីរុករកមានទទឹងយ៉ាងហោចណាស់ 1000 ភិចសែល) រចនាប័ទ្ម CSS នេះនឹងមានប្រសិទ្ធិភាពផ្លាស់ប្តូរទំហំពុម្ពអក្សររបស់យើងពី 16 ភីចសែលដែលយើងបានបង្កើតឡើងដើមដំបូងទៅតម្លៃថ្មីរបស់យើង 20 ភីកសែល។

បន្ថែមរចនាប័ទ្មបន្ថែម

អ្នកអាចដាក់វិធាន CSS ជាច្រើននៅក្នុងការសួរបែបមេត្រីដែលត្រូវការដើម្បីកែតម្រូវរូបភាពគេហទំព័ររបស់អ្នក។ ឧទាហរណ៍ប្រសិនបើអ្នកមិនគ្រាន់តែបង្កើនទំហំពុម្ពអក្សរទៅជា 20 ភីកសែលទេប៉ុន្តែក៏ផ្លាស់ប្តូរពណ៌នៃកថាខណ្ឌទាំងអស់ទៅជាពណ៌ខ្មៅ (# 000000) អ្នកអាចបន្ថែមនេះ:

@media screen និង (min-width: 1000px) {body {font-size: 20px; } p {ពណ៌: # 000000; }}

បន្ថែមសំណួរប្រព័ន្ធផ្សព្វផ្សាយបន្ថែម

លើសពីនេះទៀតអ្នកអាចបន្ថែមសំណួរប្រព័ន្ធផ្សព្វផ្សាយជាច្រើនសម្រាប់រាល់ទំហំធំជាងមុនដោយបន្ថែមពួកវាទៅសន្លឹករចនាប័ទ្មរបស់អ្នកដូចនេះ:

@media screen និង (min-width: 1000px) {body {font-size: 20px; } p {ពណ៌: # 000000; {} @media screen និង (min-width: 1400px) {body {size: 24px; }}

សំណួរប្រព័ន្ធផ្សព្វផ្សាយជាលើកដំបូងនឹងចាប់ផ្តើមនៅទទឹង 1000 ភីកសែល, ការផ្លាស់ប្តូរទំហំពុម្ពអក្សរទៅ 20 ភីកសែល។ បន្ទាប់មកនៅពេលដែល browser ខាងលើ 1400 ភិចសែលទំហំពុម្ពអក្សរនឹងប្តូរម្តងទៀតទៅជា 24 pixels ។ អ្នកអាចបន្ថែមសំណួរប្រព័ន្ធផ្សព្វផ្សាយច្រើនតាមតម្រូវការសម្រាប់គេហទំព័រជាក់លាក់របស់អ្នក។

ទទឹងអប្បបរមានិងអតិបរមា

ជាទូទៅមានវិធីពីរយ៉ាងក្នុងការសរសេរសំណួរសំណួរ - ដោយប្រើ "ទទឹងអប្បបរមា" ឬ "ទទឹងអតិបរមា" ។ រហូតមកដល់ពេលនេះយើងបានមើលឃើញ "ទទឹងអប្បបរមា" នៅក្នុងសកម្មភាព។ នេះបណ្តាលឱ្យសំណួរប្រព័ន្ធផ្សព្វផ្សាយមានប្រសិទ្ធិភាពនៅពេលដែលកម្មវិធីរុករកបានទៅដល់យ៉ាងហោចណាស់ទទឹងអប្បបរមា។ ដូច្នេះសំណួរដែលប្រើ "ទទឹងអប្បបរមា: 1000px" នឹងអនុវត្តនៅពេលដែលកម្មវិធីរុករកមានទទឹងយ៉ាងហោចណាស់ 1000 ភីចសែល។ រចនាប័ទ្មនៃការសួររបស់អ្នកប្រើត្រូវបានប្រើនៅពេលអ្នកកំពុងបង្កើតគេហទំព័រតាមលក្ខណៈ "ចល័តដំបូង" ។

ប្រសិនបើអ្នកប្រើ "ទទឹងអតិបរមា" វាដំណើរការផ្ទុយពីនេះ។ ការសួរសំណួររបស់ "ទទឹងអតិបរមា: 1000px" នឹងត្រូវអនុវត្តនៅពេលដែលកម្មវិធីរុករកបានធ្លាក់ចុះខាងក្រោមទំហំនេះ។

ទាក់ទងនឹងកម្មវិធីរុករកចាស់

បញ្ហាប្រឈមមួយជាមួយសំណួរប្រព័ន្ធផ្សព្វផ្សាយគឺការខ្វះខាតការគាំទ្ររបស់ពួកគេនៅក្នុងកំណែចាស់ៗនៅលើកម្មវិធី Internet Explorer ។ អរគុណណាស់ដែល មានពហុស្ប៉ិច ដែលអាចគាំទ្រការគាំទ្រសម្រាប់សំណួរប្រព័ន្ធផ្សព្វផ្សាយនៅក្នុងកម្មវិធីរុករកចាស់ៗដែលអនុញ្ញាតឱ្យអ្នកប្រើវានៅលើគេហទំព័រថ្ងៃនេះខណៈពេលដែលនៅតែធានាថាការបង្ហាញគេហទំព័រនោះមើលទៅមិនខូចនៅក្នុងកម្មវិធីរុករកចាស់។

កែសម្រួលដោយលោក Jeremy Girard នៅថ្ងៃទី 1/24/17