Қаріп өлшемдерін өзгерту үшін Ems пайдалану
Веб-бетті құрастырған кезде, көптеген мамандар сізге ems, exs, percentages немесе пикселдер сияқты салыстырмалы өлшемдегі қаріптерді (және шын мәнінде барлығы) ұсынады. Өйткені, сіз шынымен де біреудің сіздің мазмұныңызды көретін түрлі жолдарын білмейсіз. Егер абсолютті өлшемді (дюйм, сантиметр, миллиметр, нүкте немесе пикика) қолдансаңыз, ол әртүрлі құрылғылардағы беттің көрінуіне немесе оқылуына әсер етуі мүмкін.
Және W3C сізге ems мөлшерін қолдануға кеңес береді.
Бірақ қаншалықты үлкен?
W3C бойынша em:
«пайдаланылатын элементтің 'font-size' сипатының есептелетін мәніне тең» қоспалар «'font-size' сипатының өзіндік мәнінде орын алғанда, бұл жағдайда ол сілтеме жасайды тектік элементтің қаріп өлшеміне дейін. «
Басқаша айтқанда, ems абсолютті мөлшері жоқ. Олар өздерінің өлшемдеріне негізделіп, олардың қай жерде екеніне негізделеді. Көпшіліктің веб-дизайнерлері үшін олар веб-браузерде екенін білдіреді, сондықтан ұзындықтағы қаріп бұл браузер үшін әдепкі қаріп өлшемімен дәл сол өлшемді құрайды.
Бірақ әдепкі өлшемі қаншалықты биік? Клиенттер өз браузерлерінде әдепкі қаріп өлшемін өзгерте алатындықтан, 100% сенімді болудың ешқандай жолы жоқ, бірақ көптеген адамдар браузерлердің көпшілігі 16px әдепкі қаріп өлшемі бар деп есептей алмайды. Сондықтан көп уақыт 1em = 16px .
Пиксельде ойлап шығыңыз, Өлшем үшін Ems пайдаланыңыз
Сіз әдепкі қаріп өлшемі 16 пиксель екенін білсеңіз, клиенттеріңізге бетті оңай өзгертуге мүмкіндік беретін ems-ді қолдануға болады, бірақ қаріп өлшемдері үшін пикселдер деп ойлаңыз.
Айта кету керек, сізде құрылымдық құрылым:
- Тақырып 1 - 20px
- Тақырып 2 - 18px
- Тақырып 3 - 16px
- Негізгі мәтін - 14px
- Қосымша мәтін - 12px
- Сілтемелер - 10px
Сіз оларды өлшеу үшін пикселдерді пайдалану жолымен анықтай аласыз, бірақ IE 6 және 7-ні пайдаланатын кез келген адам сіздің бетті жақсы түрде өзгертуге қабілетсіз. Сондықтан, өлшемдерді ems-ге түрлендіру керек, бұл тек кейбір математика мәселесі:
- Тақырып 1 - 1.25эм (16 х 1.25 = 20)
- Тақырып 2 - 1.125эм (16 × 1.125 = 18)
- Тақырып 3 - 1эм (1эм = 16px)
- Негізгі мәтін - 0.875м (16 х 0,875 = 14)
- Ішкі мәтін - 0.75 (16 х 0,75 = 12)
- Сілтемелер - 0.625эм (16 х 0.625 = 10)
Мұраны ұмытпа!
Бірақ бәрі бірдей емес. Есте сақтау керек нәрсе - олар ата-ананың мөлшеріне жету. Сондықтан элементтерді әртүрлі қаріп өлшемімен кірістірген болсаңыз, күткеннен әлдеқайда кішірек немесе үлкен қаріппен аяқталуы мүмкін.
Мәселен, келесідей стиль парағы болуы мүмкін:
p (шрифт өлшемі: 0.875м; }
.footnote {font-size: 0.625em; }
Бұл негізгі мәтін және сілтемелер үшін сәйкесінше 14px және 10px қаріптерге әкеледі. Бірақ, параграфтың ішіндегі түсіндірме сөзін келтірсеңіз, сіз 10px емес, 8.75px мәтінмен аяқтай аласыз. Өзіңіз көріңіз, осы CSS-ге және келесі HTML-ге құжатқа қойыңыз:
Бұл шрифт биіктікте 14px немесе 0,875 ems.
Бұл тармақта түсіндірме бар.
Бұл жай ғана сілтеме параграфы болғанымен.
Ескерту мәтінін 10 пиксельде оқу қиын, ол 8,75px шамасында оқи алмайды.
Мәселен, сіз ems пайдаланған кезде, сіз ата-аналар нысандарының өлшемдерін өте жақсы білуіңіз керек немесе сіздің бетіңізде шын мәнінде біркелкі өлшемді элементтермен аяқталады.