បង្កើត CSS clamp() ឥតគិតថ្លៃ
បង្កើតតម្លៃ CSS clamp() fluid សម្រាប់ typography ឆ្លើយ និង spacing។ Set ទំហំ min/max និងជួរ viewport មើលការមើលជាមុនផ្ទាល់ ហើយចម្លង CSS ម្ដងបន្ទាត់។
ទំហំ rendered នៅ viewport ផ្សេងគ្នា
clamp(min, preferred, max) ធ្វើមាត្រដ្ឋានតម្លៃ fluid ជាមួយ viewport រួចចាក់សោនៅអប្បបរមា និងអតិបរមា។ វាជំនួសសំណួរ media queries ជាច្រើនសម្រាប់ typography, spacing, និងទទឹងជាមួយបន្ទាត់តែមួយ។
ការប្រើប្រាស់ទូទៅ
- បង្កើតអក្សរ Responsive បែបទន់ភ្លន់ផ្នែក ម៉ាក់ស លម្អិត រវាង ទូរស័ព្ទ និង គ្រឹមផ្សេងទៀត ដោយលើកលម្អិត។
- លម្អិត ចន្លោះ និង Paddingផាក់ ចន្លោះ ចូលក្នុងលម្អិត ក្នុងពេលលម្អិត វិលលម្អិត ដល់។
- ដាក់ Media Queries ដោយ clamp()ដាក់ ល្អិត ចូលក្នុង លម្អិត វង។
- បង្កើត លម្អិត វ្យាក្រម លម្អិតបង្កើត មាត្រដ្ឋាន clamp() សម្រាប់ ឃ្នូយ វ្យាក្រម លម្អិត។
- លម្អិត ឧបករណ៍ និង ឌីលម្អិត ចំណងជើងផាក់ ចំណងជើង ឧបករណ៍-ទំព័រ ដើម្បីផ្ដើម ឈាប់ នឹង ល្អិត។
វាដំណើរការដោយរបៀបណា
ឧបករណ៍នេះគណនាតម្លៃ CSS clamp() ដោយប្រើរូបមន្ត interpolation លីនេអ៊ែរសរសេរដោយដៃ — គ្មានបណ្ណាល័យ គ្មានការធ្វើដំណើររង្វិលជុំម៉ាស៊ីនមេទេ។ អ្នកបញ្ចូលទំហំពីរ និងទទឹងវីនដូមើលពីរ; គណិតវិទ្យាដំណើរការភ្លាមៗនៅក្នុងកម្មវិធីរុករករបស់អ្នក ហើយផលិតកន្សោម clamp() ត្រៀមបិទភ្ជាប់ជាមួយតម្លៃពេញចិត្ត vw-based ដែលពង្រីកប្រភេទ ឬចន្លោះទំហំរបស់អ្នករលូនរវាងចំណុចផ្តាច់ទាំងនោះ។
- 1ការគណនាជម្រាលលីនេអ៊ែរឧបករណ៍គណនាជម្រាល pixel-ក្នុងមួយ-pixel៖ (maxSize - minSize) / (maxViewport - minViewport)។ ជម្រាលនេះបន្ទាប់មកត្រូវបានប្តូរទៅឯកតា vw ដោយគុណនឹង 100 ដែលជាស្នូលនៃរបៀបដែលការពង្រីកទាក់ទងនឹងវីនដូមើល CSS ដំណើរការ។
- 2ការទទួល interceptoffset intercept (ជា px ឬ rem) ត្រូវបានគណនាដូច្នេះអនុគមន៍លីនេអ៊ែរឈានដល់ទំហំអប្បបរមារបស់អ្នកយ៉ាងច្បាស់នៅវីនដូមើលអប្បបរមា។ ជាមួយគ្នា ជម្រាល និង intercept បង្កើតតម្លៃពេញចិត្តខាងក្នុង clamp() — ផ្នែកដែលពង្រីកពិតប្រាកដ។
- 3ការបម្លែងឯកតា និងការធ្វើទ្រង់ទ្រាយលទ្ធផលប្រសិនបើអ្នកជ្រើសរើសលទ្ធផល rem តម្លៃ pixel នីមួយៗត្រូវបានចែកនឹងទំហំពុម្ពអក្សរ root ដែលបានកំណត់ (លំនាំដើម 16px) មុននឹងសរសេរទៅក្នុង string clamp()។ ថ្នាក់តម្លៃបំពាន Tailwind ដែលផ្គូផ្គងក៏ត្រូវបានផលិតដែរ ជាមួយចន្លោះជំនួសដោយសញ្ញាបន្ទាត់ក្រោមតាមវាក្យសម្ព័ន្ធ Tailwind។
- 4ការមើលជាមុនឧបករណ៍រំកិលវីនដូមើលផ្ទាល់ឧបករណ៍រំកិលជួរអនុញ្ញាតឱ្យអ្នកអូសពី 320px ដល់ 1920px ធំ។ នៅទីតាំងនីមួយៗ រូបមន្តជម្រាល-និង-intercept ដូចគ្នាវាយតម្លៃទំហំ clamped ក្នុងពេលវេលាពិត និងបង្ហាញអត្ថបទគំរូនៅទំហំ pixel ដែលបានគណនានោះ ដូច្នេះអ្នកអាចមើលឃើញឥរិយាបថពង្រីកមុននឹងចម្លងអ្វីមួយ។
ឧបករណ៍ពាក់ព័ន្ធ
ម៉ាស៊ីនបង្កើត CSS Grid
រចនា CSS grid ដោយមើលឃើញ — track ឯកតា និងគម្លាត — ហើយចម្លង CSS និង HTML ដែលបង្កើត។
តើគុណភាពបង្ហាញអេក្រង់របស់ខ្ញុំជាអ្វី
មើលកម្រិតបង្ហាញអេក្រង់របស់អ្នកជា CSS និងភីកសែលពិតប្រាកដ ទំហំបង្អួច សមាមាត្រភីកសែល ជម្រៅពណ៌ HDR ការគាំទ្រការប៉ះ និង refresh rate ព្រមទាំងចម្លងទាំងអស់បាន។
ឧបករណ៍បង្កើតហត្ថលេខា
គូរហត្ថលេខាជាមួយកណ្តុរ ម្រាមដៃ ឬហ្គោមរបស់អ្នក ឬវាយឈ្មោះរបស់អ្នកជាមួយពុម្ពអក្សរសរសេរដោយដៃ រួចនាំចេញជា PNG ឬ SVG ថ្លា។