Օգտագործելով Ems, տառատեսակների չափերը փոխելու համար
Երբ դուք ստեղծում եք վեբ էջ, շատ մասնագետներ խորհուրդ են տալիս ձեզ չափսի տառատեսակներ (եւ, փաստորեն, ամեն ինչ) հարաբերական չափով, ինչպիսիք են ems, exs, percentages կամ pixels: Սա է պատճառը, որ դուք իսկապես չգիտեք բոլոր այն տարբեր եղանակները, որոնք ինչ-որ մեկը կարող է դիտել ձեր բովանդակությունը: Եվ եթե օգտագործեք բացարձակ չափ (դյույմ, սանտիմետր, միլիմետր, միավոր կամ picas), այն կարող է ազդել տարբեր սարքերում էջի ցուցադրման կամ ընթերցման վրա:
Եվ W3C- ն խորհուրդ է տալիս օգտագործել ems չափերի համար:
Բայց որքան մեծ է Em.
Համաձայն W3C- ի em:
«հավասար է տարրերի տառատեսակի չափի արժեքի հաշվարկված արժեքին, որի վրա այն օգտագործվում է բացառություն է այն դեպքում, երբ« em »-ը տեղի է ունենում« font-size »արժեքի արժեքի մեջ, որի դեպքում դա վերաբերում է ծնողի տարրի տառաչափին »:
Այսինքն, EMS- ը բացարձակ չափ չի ունենում: Նրանք վերցնում են իրենց չափի արժեքները `հիմնվելով նրանց վրա: Վեբ դիզայներների մեծամասնության համար դա նշանակում է, որ դրանք գտնվում են վեբ բրաուզերի մեջ, ուստի տառատեսակը, որը չափազանց բարձր է, նույն չափն է, քանի որ այդ դիտարկչի համար նախատեսված տառաչափը:
Բայց որքան բարձր է չափսը: Առանց 100% վստահելիության հնարավոր չէ գտնել, քանի որ հաճախորդները կարող են փոխել իրենց տառատեսակը իրենց բրաուզերում, բայց քանի որ շատերը չեն կարող ենթադրել, որ բրաուզերի մեծ մասը ունեն 16px տառատեսակի տառատեսակ: Այնպես որ, մեծ մասը ժամանակի 1em = 16px :
Մտածեք փիքսելներում, օգտագործեք Էմսը միջոցառման համար
Երբ դուք գիտեք, որ տառատեսակի չափսը 16px է, ապա կարող եք օգտագործել ems- ը `ձեր հաճախորդներին թույլատրել էջը հեշտությամբ չափափոխել, բայց կարծում եմ, որ պիքսելներում ձեր տառատեսակների չափերը:
Ասացեք, որ այսպիսի կառույց կա.
- Վերնագիր 1 - 20px
- Վերնագիր 2 - 18px
- Վերնագիր 3 - 16px
- Հիմնական տեքստը `14px
- Ենթ տեքստը `12px
- Ծանոթագրություններ - 10px
Դուք կարող եք սահմանել դրանք այնպես, որ օգտագործելով փիքսել չափման համար, բայց այն ժամանակ, երբ որեւէ մեկը, օգտագործելով IE 6 եւ 7, չի կարողանա չափափոխել ձեր էջը: Այսպիսով, դուք պետք է փոխեք չափերը ems- ի եւ սա պարզապես մաթեմատիկայի խնդիր է.
- Վերնագիր 1 - 1.25EM (16 x 1.25 = 20)
- Վերնագիր 2 - 1.125 (16 × 1.125 = 18)
- Վերնագիր 3 - ից 1em (1em = 16px)
- Հիմնական տեքստը `0.875 (16 x 0.875 = 14)
- Sub text - 0.75em (16 x 0.75 = 12)
- Ծանոթագրություններ - 0.625EM (16 x 0.625 = 10)
Մի մոռացեք ժառանգությունը:
Բայց դա ամենը չէ, որ ems. Մյուս բանը, որ դուք պետք է հիշեք, այն է, որ նրանք վերցնում են ծնողի չափը: Այսպիսով, եթե դուք ունեք տարրեր տարբեր տառատեսակների չափերով, դուք կարող եք ավարտել տառատեսակով ավելի փոքր կամ ավելի մեծ, քան դուք ակնկալում եք:
Օրինակ, դուք կարող եք ունենալ նման ոճագիր:
p {font-size: 0.875em; }
.footnote {font-size: 0.625em; }
Դա հանգեցնում է տառատեսակների, որոնք ունեն 14px եւ 10px հիմնական տեքստի եւ ծանոթագրությունների համապատասխանաբար: Բայց եթե պարբերության մեջ դրեք ծանոթագրությունը, կարող եք վերջ տալ տեքստին, որը 8.75px է, քան 10px: Փորձեք ինքներդ ձեզ, դնում այս CSS- ի եւ հետեւյալ HTML- ը փաստաթղթում.
Այս տառատեսակը 14px կամ 0,875 էմս բարձրության վրա:
Այս պարբերությունը ունի գրառումներ:
Թեեւ սա պարզապես գրված է:
Հղման տեքստը դժվար է կարդալ 10px- ով, այն գրեթե անարդյունավետ է 8.75px- ով:
Այսպիսով, երբ դուք օգտագործում ems, դուք պետք է շատ տեղյակ լինի ծնողների օբյեկտների չափերը, կամ դուք կստանաք ձեր իսկ էջում իրական տարօրինակ չափի տարրերի հետ: