CSS clamp() генераторы — тегін
Адаптивті типография және бос орын үшін сұйық CSS clamp() мәнін жасаңыз. Минимум/максимум өлшем мен көрініс порт ауқымын орнатыңыз, тірі алдын ала қараңыз және бір жолды CSS-ті көшіріңіз.
Әр түрлі viewport-тарда визуалданған өлшем
clamp(min, preferred, max) мәнді viewport-пен бірге еркін масштабтайды, содан кейін ең кіші және ең үлкен мәнде бекітіледі. Типография, бос орын және ендер үшін медиа-сұраныс жинақтарын бір жолмен алмастырады.
Жиі қолданылуы
- Сұйық Жүйесі Типографияны ҚұрастырыңызШрифт өлшімдерін ұялы мен жұмыс үстелінің арасында бір сатыда тегіс өлшеңіз.
- Сұйық Шегіндіктер мен ТолымдыБөлім өндіктіліктің сарамалықта қоршау өндіктіліктің әсі баяндарында сыртқа әйтпек.
- Мәлімет Сұрақтарын clamp() ішінде АлмастырыңызБөлінді нүктесі жүйесінің үйінтіктерін бір сұйық мәніне құлағындатыңыз.
- Сұйық Типі Өлшекті ҚұрастырыңызДизайны-жүйесі түрді өлшекке арналған өндіктіліктің clamp() қадамын құрастырыңыз.
- Сұйық Батыр және Экран БасылмасыҮлкен ғарышталма сайттың басылмасын сырпалау қатты өндіктілігімді көгелдіңіз.
Қалай жұмыс істейді
Бұл құрал CSS clamp() мәндерін қолмен жазылған сызықтық интерполяция формуласы арқылы есептейді — кітапхана жоқ, серверге барып-келу жоқ. Сіз екі өлшем мен екі көрініс терезесі енін енгізесіз; математика браузеріңізде лезде жұмыс істейді және сол шекараралар арасында қарпіңіз бен аралығыңызды тегіс масштабтайтын vw негізіндегі қалаулы мәні бар пайдалануға дайын clamp() өрнегін шығарады.
- 1Сызықтық көлбеу есептеуҚұрал пиксель-пиксельдегі көлбеуді есептейді: (maxSize - minSize) / (maxViewport - minViewport). Бұл көлбеу содан кейін 100-ге көбейту арқылы vw бірліктеріне түрленеді, бұл CSS көрініс-терезесіне қатысты масштабтаудың негізі.
- 2Кесу нүктесін шығаруСызықтық функция ең кіші көрініс терезесінде дәл ең кіші өлшеміне тиетіндей кесу ығысуы (px немесе rem-де) есептеледі. Бірге, көлбеу мен кесу нүктесі clamp() ішіндегі қалаулы мәнді құрайды — нақты масштабталатын бөлік.
- 3Бірлікті түрлендіру және шығыс пішімдеуrem шығысын таңдасаңыз, clamp() жолына жазылмас бұрын әр пиксель мәні бапталған түбір қаріп өлшеміне (әдепкі 16px) бөлінеді. Сәйкес Tailwind еркін мән класы да шығарылады, бос орындар Tailwind синтаксисі бойынша астыңғы сызықтармен алмастырылады.
- 4Тірі көрініс терезесі сырғытпасын алдын ала қарауАуқым сырғытпасы 320пиксельден 1920пикселге дейін ені бойынша айналдыруға мүмкіндік береді. Әр орында дәл сол көлбеу-мен-кесу формуласы қысылған өлшемді нақты уақытта бағалайды және сол есептелген пиксель өлшемінде үлгі мәтінін өңдейді, сондықтан ештеңе көшірместен бұрын масштабтау мінез-құлқын көре аласыз.
Байланысты құралдар
CSS торы генераторы
CSS торын визуалды түрде құрастырыңыз — трекілер, бірліктер және аралықтар — және құрастырылған CSS және HTML-ді көшіріңіз.
Менің экран ажыратымдылығым қандай
Экран ажыратымдылығыңызды CSS және нақты пикселдермен, терезе өлшемін, пикселдер қатынасын, түс тереңдігін, HDR, сенсорлық қолдауды және жаңарту жиілігін көріңіз және барлығын көшіріп алыңыз.
Қолтаңба Жасаушы
Тінтуірмен, саусағыңызбен немесе стилуспен қолтаңба сызыңыз немесе атыңызды қолжазба қарпінде теріңіз, содан кейін оны мөлдір PNG немесе SVG ретінде экспорттаңыз.