Бұл құрал не істейді
Бұл құрал пиксель (px) мәндерін root em (rem) және em бірліктеріне, және керісінше, түрлендіреді. Үш бірліктің кез келгеніне мән терсеңіз, құрал қалған екеуін автоматты түрде есептеп, дереу көрсетеді. Түрлендіруден бөлек, өзіңіздің негізгі қаріп өлшеміңізді және em контекстік қаріп өлшемін орната аласыз, сонда нәтиже жалпы әдепкі мән емес, нақ сіздің дизайныңызға сай шығады. Алғашқыда, ешнәрсе өзгертпей тұрып, 16px, 1rem және 1em — үшеуі де бір ұзындықты білдіреді; құрал осы негізден бастайды.
Негізгі және em контекстік қаріп өлшемдерін орнату
Құралда екі бөлек қаріп өлшемі өрісі бар. Негізгі қаріп өлшемі (px) — rem мәндері соған қатысты есептелетін негізгі өлшем. Ол 0-ден үлкен сан болуы керек және әдепкі бойынша 16px-ке тең. Егер бұл өріске жарамсыз мән енгізсеңіз, «Негізгі қаріп өлшемі 0-ден үлкен сан болуы керек.» деген хабарлама шығады.
em контекстік қаріп өлшемі (px) — есептеп жатқан нақты элементтің қаріп өлшемі, себебі em мәні бүкіл беттің емес, өз орналасқан элементінің қаріп өлшеміне қатысты болады. Бұл өріс те 0-ден үлкен сан болуы керек және әдепкі бойынша 16px. Мұнда жарамсыз мән енгізсеңіз, «em контекстік қаріп өлшемі 0-ден үлкен сан болуы керек.» деген хабарлама пайда болады. Екі өріс те бір-бірінен тәуелсіз жұмыс істейді: root бір мақсатқа, em контексі басқа мақсатқа қызмет етеді.
Мәндерді енгізу және нақты уақытта түрлендіру
Мәндер бөлімінде px, rem және em үшін бөлек өрістер бар. Осы үшеудің кез келгенін өзгертсеңіз, қалған екеуі сіз терген сәтте, қолданыстағы негізгі және em контекстік қаріп өлшемдерін ескере отырып, қайта есептеледі. Мысалы, негізгі және em контекстік өлшемдер әдепкі 16px күйінде тұрса, px өрісіне 24 деп жазсаңыз: rem өрісі 1.5rem, ал em өрісі 1.5em болып жаңарады, себебі 24-ті 16-ға бөлгенде 1.5 шығады.
Теріс пиксель мәндеріне де рұқсат етілген. Сол 16px әдепкі жағдайында -8 мәнін px өрісіне жазсаңыз, ол -0.5rem болып түрленеді. Ал Мәндер өрістерінің біріне сан емес мән енгізсеңіз, «Түрлендіру үшін сандық мән енгізіңіз.» деген хабарлама көрсетіледі.
Негізгі қаріп өлшемін өзгерту нәтижеге қалай әсер етеді
Негізгі немесе em контекстік қаріп өлшемін өзгерткенде, өрістерде тұрған мән де соған сай қайта есептеледі. Мысалы, px өрісінде 40 тұрса және негізгі қаріп өлшемі 16px болса, rem өрісі 2.5rem көрсетеді. Px мәнін өзгертпей, негізгі қаріп өлшемін 20px-ке көтерсеңіз, rem өрісі 2rem-ге дейін жаңарады — яғни rem нәтижесі тек терген пиксель санына емес, сол сәтте орнатылған негізгі қаріп өлшеміне де байланысты.
em жағы да дәл солай жұмыс істейді, тек негізгі өлшемнің орнына em контекстік өлшемін пайдаланады. em контекстік қаріп өлшемін 20px-ке орнатып, px өрісіне 30 жазсаңыз, em өрісі 1.5em көрсетеді, себебі 30-ды 20-ға бөлгенде 1.5 шығады. Осылайша, есептеп жатқан элементтің нақты қаріп өлшемін контекст ретінде беру арқылы em мәнін дәл ала аласыз.
Жиі қолданылатын px → rem кестесі
Түрлендіру өрістерінің астында құрал Жиі қолданылатын px → rem (16px негізі) атты кестені көрсетеді. Бұл кесте жиі қолданылатын пиксель мәндерін нақ 16px негізгі қаріп өлшеміне қатысты rem-ге түрлендіріп береді. Ол тұрақты анықтамалық ретінде тұрады, сол арқылы бірнеше әдеттегі мәнді Мәндер өрісіне бір-бірлеп теріп отырмай-ақ тез қарап шыға аласыз.
Деректеріңіз қайда өңделеді
Әрбір түрлендіру браузеріңізде орындалады. Енгізген ештеңе BroBroGo серверіне жүктелмейді.
Бұл құрал кімге қажет
Бұл құрал бекітілген пиксель мәндерін адаптивті дизайн үшін салыстырмалы rem немесе em бірліктеріне түрлендіру керек адамға арналған. Сондай-ақ негізгі қаріп өлшемінің әртүрлі мәндері rem нәтижелеріне қалай әсер ететінін түсінгісі келетіндерге, белгілі бір элементтің қаріп өлшеміне негізделген em мәнін есептеу керек адамдарға, және оқырман браузердегі әдепкі қаріп өлшемін өзгерткенде де өз дизайнының дұрыс масштабталуын қамтамасыз еткісі келетіндерге пайдалы.
Жиі қойылатын сұрақтар
px, rem және em арасындағы айырмашылық неде? px — бекітілген ұзындық. rem парақтың негізгі қаріп өлшеміне қатысты өлшенеді, сондықтан 16px негізінде 1rem 16px-ке тең болады. em өзі орналасқан элементтің қаріп өлшеміне қатысты өлшенеді. Қаріп өлшемі мен шегіністерді rem бірлігінде орнату оқырман браузердің әдепкі қаріп өлшемін өзгерткенде бәрінің бірге масштабталуына мүмкіндік береді.
Неліктен жеке em контекст өлшемі бар? em бірлігі әрқашан негізгі өлшемге емес, өзінің жеке элементінің қаріп өлшеміне қатысты болады. em мәнін дұрыс есептеу үшін em контекстін сол элементтің қаріп өлшеміне тең етіп орнатыңыз, ал олар сәйкес келгенде оны негізгі өлшеммен бірдей етіп қалдырыңыз.
Егер менің негізгі қаріп өлшемім 16px болмаса ше? CSS кодыңызға сәйкес келуі үшін негізгі қаріп өлшемі өрісін өзгертіңіз, сонда әрбір rem мәні лезде жаңартылады. Төмендегі қысқаша кесте көптеген сайттар бастайтын әдеттегі 16px негізіне арналған ыңғайлы нұсқаулық болып табылады.
Теріс пиксель мәнін түрлендіруге бола ма? Иә. Құрал теріс пиксель мәндерін қабылдайды және оларды оң мәндермен бірдей тәсілмен түрлендіреді.
Мәндер, негізгі қаріп өлшемі немесе em контекстік өлшемі өрісіне жарамсыз нәрсе енгізсем не болады? Әр өріс өз бетінше тексеріледі. Мәндер өрісіндегі жарамсыз енгізу «Түрлендіру үшін сандық мән енгізіңіз.» дегенді, жарамсыз негізгі қаріп өлшемі «Негізгі қаріп өлшемі 0-ден үлкен сан болуы керек.» дегенді, ал жарамсыз em контекстік қаріп өлшемі «em контекстік қаріп өлшемі 0-ден үлкен сан болуы керек.» дегенді көрсетеді.