CSS clamp() калькуляторы
Кіші және үлкен экрандар үшін өлшемді енгізіп, олардың арасында бірқалыпты өзгеретін икемді clamp() мәнін алыңыз — қаріп өлшемдері, ішкі/сыртқы шегіністер немесе аралықтар үшін.
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)Нәтиже ортаңғы мүшеде rem бөлігін сақтайды, сондықтан біреу масштабты 200%-ға дейін үлкейткенде мәтін бәрібір үлкейеді — тек экран өлшеміне (viewport) негізделген мән бұлай істей алмас еді.
Икемді мәтін, дәл бапталған өлшем.
Есептеу толығымен браузеріңізде орындалады. Мұнда енгізген ештеңе BroBroGo серверіне жүктелмейді.
Жиі қойылатын сұрақтар
Калькулятор clamp() мәнін қалай жасайды?
Сіз оған екі нүктені бересіз: кіші экран еніндегі өлшем және үлкен экран еніндегі өлшем. Ол осы екі нүктенің арасына түзу сызық сызады, осылайша экран кеңейген сайын өлшем бірқалыпты өседі, содан кейін оны clamp() функциясына орайды, бұл оның кіші экран өлшемінен төмен түсуіне немесе үлкен экран өлшемінен жоғары шығуына жол бермейді. Екі еннің арасында өлшем икемді түрде өзгереді; олардан тыс жерде ол ең жақын шектеуде қалады.
Неліктен нәтиже пиксельдің орнына rem және vw бірліктерінде беріледі?
Шектеулер rem бірлігінде берілген және өзгеретін ортаңғы бөлік rem компонентін сақтайды, сондықтан оқырман браузердің әдепкі қаріп өлшемін үлкейткенде мәтін бәрібір өседі — тек пиксель немесе экран өлшеміне негізделген мән бұған кедергі келтіруі мүмкін. Сіз өлшемдерді пиксельмен енгізесіз, өйткені бұл түсініктірек, ал құрал негізгі қаріп өлшемін пайдаланып оларды rem-ге түрлендіреді.
Мұны тек қаріп өлшемі үшін емес, шегіністер үшін де қолдана аламын ба?
Иә. Дәл осы мәнді ішкі шегініс (padding), сыртқы шегініс (margin), аралық (gap), ен немесе биіктік үшін — ұзындық қолданылатын кез келген жерде пайдалануға болады. Мәтіннің орнына аралықтың қалай өсетінін көру үшін алдын ала қарау режимін «Блок» күйіне ауыстырыңыз. Егер кіші және үлкен өлшемдеріңіз бірдей болса, нәтиже қарапайым бекітілген ұзындыққа айналады, өйткені масштабтайтын ештеңе болмайды.
Барлық браузерлер clamp() функциясын қолдай ма?
Иә — 2020 жылдан бастап барлық заманауи браузерлер clamp() функциясын қолдайды, сондықтан бұл мәнді балама нұсқасыз-ақ тікелей қолдануға болады. Өте үлкен максималды мәндер немесе жылдам өзгеру жылдамдығы үшін, мәтіннің оны қажет ететін оқырмандар үшін 200% масштабта бәрібір үлкейетінін тексеріп алған жөн.