دروستکەری CSS clamp()ی بەخۆڕایی
بەهایەکی شلی clamp()ی CSS دروست بکە بۆ فۆنت و بۆشایی وەڵامدەرەوە. قەبارەی کەمترین/زۆرترین و مەودای ڕوانگە دیاری بکە، پێشبینینی زیندوو ببینە، و CSSی یەک هێڵی کۆپی بکە.
قەبارەی نیشاندراو لە viewportی جیاواز
clamp(min, preferred, max) نرخێک بە شێوەیەکی نەرم لەگەڵ viewport پێوانە دەکات، پاشان لە کەمترین و زۆرترین دەیبەستێتەوە. جێی چەندین media query بۆ فۆنت، بۆشایی، و پانی دەگرێتەوە بە یەک هێڵ.
چۆن کار دەکات
ئەم ئامرازە نرخی CSS clamp() ژمێردەکات بە بەکارهێنانی فۆرمولێکی هێڵی ئینتەرپۆلاسیۆنی دەستنووس — بەبێ کتێبخانە، بەبێ گەشتی سێرڤەر. دوو قەبارە و دوو پانی دیمەن دەنووسیت؛ بیرکارییەکە دەستبەجێ لە وێبگەڕەکەتدا ڕادەبات و دەقنووسینێکی ئامادەی لکاندنی clamp() دروستدەکات لەگەڵ نرخێکی گونجاوی بنەمای vw کە جۆر یان بۆشاییت بە نەرمی لەنێوان ئەو خاڵانەدا پیوان دەکات.
- 1ژمێریاری خێوی هێڵیئامرازەکە خێوێکی پیکسێل-بۆ-پیکسێل ژمێردەکات: (maxSize - minSize) / (maxViewport - minViewport). ئەم خێوە پاشان دەگۆڕدرێت بۆ یەکەی vw بە لێکدانی 100، کە ناوەڕۆکی سەرەکی چۆنیەتی کارکردنی پیواندنی گونجاوی دیمەنی CSSـە.
- 2وەرگرتنی ئینتەرسێپتکۆچی ئینتەرسێپت (بە px یان rem) ژمێردەکرێت بۆیە فەنکشنی هێڵییەکە ڕاستەوخۆ لە کەمترین قەبارەت دەکەوێتە کەمترین دیمەنت. پێکەوە، خێو و ئینتەرسێپت نرخی گونجاوی لەناو clamp()دا پێکدەهێنن — بەشەی کە بەڕاستی پیوان دەکات.
- 3گۆڕینی یەکە و فۆرماتی دەرچوونئەگەر دەرچوونی rem هەڵبژێریت، هەر نرخی پیکسێلێک دابەش دەکرێت بەسەر قەبارەی فۆنتی ڕیشەی ڕێکخراوت (بنەڕەت 16px) پێش نووسینەوە لەناو ڕیزبەندی clamp()دا. کلاسێکی هاوتای نرخی-ئازادی Tailwindیش دروستدەکرێت، لەگەڵ بۆشایی گۆڕدراو بۆ ژێرهێڵ بەپێی دەقنووسینی Tailwind.
- 4پێشبینینی خشتەبەری دیمەنی زیندووخشتەبەرێکی مەودا ڕێگات دەدات لە 320px تا 1920px پان بگەڕێیت. لە هەر شوێنێک هەمان فۆرمولی خێو-و-ئینتەرسێپت قەبارەی گیراوکراو بە کاتی ڕاستەقینەدا هەڵدەسەنگێنێت و دەقی نموونە لەو قەبارە پیکسێلە ژمێردراودا دەکێشێت، بۆیە دەتوانیت ڕەفتاری پیواندن ببینیت پێش کۆپیکردنی هیچ شتێک.
ئامرازە پەیوەندیدارەکان
دروستکەری تۆڕی CSS
تۆڕی CSS بە شێوەی بینراو داڕێژە — تراک، یەکە و کاژاوەکان — و CSS و HTMLی دروستکراو کۆپی بکە.
دروستکەری واژۆ
واژۆیەک بکێشە بە مووسکە، پەنجە، یان قەڵەمی تایبەت، یان ناوت بنووسە بە فۆنتی دەستنووسین، پاشان وەک PNG یان SVGی شەفاف دەریبهێنە.
گۆڕەری پیکسڵ بۆ REM
لەنێوان px، rem، em، pt، vw، vh، و % بگۆڕە لەگەڵ قەبارەی فۆنتی سەرەکیی ڕێکخراو. خشتەیەکی سەرچاوە بۆ قەبارەی باوی پیکسڵ لەخۆدەگرێت.