وړیا د CSS clamp() تولیدونکی

دا څنګه کار کوي

دا وسیله CSS clamp() ارزښتونه د یوه لاسي-لیکل شوي خطي انټرپولیشن فورمول سره محاسبوي — هیڅ کتابتون، هیڅ سرور تللو-راتلو. تاسو دوه اندازې او دوه ویوپورت پلنوالي ورننباسئ؛ ریاضي سملاسي ستاسو براوزر کې چلیږي او یو چمتو-پیستلو clamp() بیان جوړوي د یوه vw-پر-بنسټ غوره ارزښت سره چې ستاسو ډول یا واټن هغو بریک‌پوینټونو ترمنځ نرم کچه کوي.

1. 1
   خطي کروی محاسبه

   وسیله یو پکسل-پر-پکسل کروی محاسبوي: (maxSize - minSize) / (maxViewport - minViewport). دا کروی بیا vw واحدونو ته د 100 سره ضرب کیدو سره بدلیږي، چې د CSS ویوپورت-اړوند کچه کولو اصلي برخه ده.
2. 2
   انټرسیپټ اخیستل

   یو انټرسیپټ آفسیټ (په px یا rem کې) محاسبه کیږي نو خطي فنکشن دقیقاً ستاسو لږترلږه اندازې ته لږترلږه ویوپورت پر ورسیږي. کروی او انټرسیپټ یوځای clamp() دننه غوره ارزښت جوړوي — هغه برخه چې واقعیا کچه کیږي.
3. 3
   واحد بدلون او محصول فارمیټول

   که تاسو rem محصول وټاکئ، هر پکسل ارزښت ستاسو تنظیم شوي روت فونټ اندازه (اصلي 16px) ووېشل کیږي مخکې د clamp() متن ته لیکل. یو مطابق Tailwind دلخواه-ارزښت کلاس هم جوړیږي، خالي ځایونه د Tailwind نحوی له مخې لاندې کرښو سره بدل شوي.
4. 4
   ژوندی ویوپورت سلاید مخکتنه

   یو لړ سلاید تاسو ته اجازه درکوي چې له 320px تر 1920px پلنوالی وګرځوئ. هر موقعیت کې همغه کروی-او-انټرسیپټ فورمول ریښتینې وخت کې clamp شوې اندازه محاسبه کوي او نمونه متن هغه محاسبه شوي پکسل اندازه کې انځوروي، نو تاسو کولی شئ کچه رویه وګورئ مخکې د هرڅه کاپي کولو نه.

اړوندې وسیلې