გამოყენება Ems შეცვალოს შრიფტის ზომის
ვებ-გვერდის შექმნისას, პროფესიონალების უმრავლესობამ რეკომენდაციას მოგცემთ, რომ ზომა შრიფტები (და სინამდვილეში, ყველაფერი) შედარებით ზომით, როგორიცაა ems, exs, პროცენტული ან პიქსელი. ეს იმიტომ, რომ თქვენ ნამდვილად არ იციან ყველა იმ განსხვავებულ გზას, რომლითაც შეიძლება თქვენი შინაარსის ნახვა. და თუ თქვენ იყენებთ აბსოლუტურ ზომას (ინჩი, სანტიმეტრი, მილიმეტრი, ქულა ან პიკას), ეს შეიძლება გავლენა მოახდინოს გვერდზე სხვადასხვა დისპლეიზე დისპლეის ან წაკითხვის შესაძლებლობას.
და W3C რეკომენდაციას, რომ თქვენ გამოიყენოთ ems ზომის.
მაგრამ რამდენად დიდია ემ?
W3C- ის თანახმად,
"უდრის ელემენტის" შრიფტის "ღირებულების კომპაქტურ ღირებულებას, გამონაკლისი არის, როდესაც" em "ხდება" font-size "საკუთრების ღირებულებაში, თუ ის ეხება მშობლის ელემენტის შრიფტის ზომა. "
სხვა სიტყვებით, ems არ აქვს აბსოლუტური ზომა. ისინი თავიანთი ზომის ღირებულებებზე დაყრდნობით არიან დაყრდნობით. საუკეთესო ვებ დიზაინერებისთვის , ეს იმას ნიშნავს, რომ ისინი ბრაუზერში არიან, ასე რომ შრიფტი, რომელიც 1 სანტიმეტრია, ზუსტად იგივე ზომაა, როგორც ნაგულისხმები შრიფტის ზომა ამ ბრაუზერისთვის.
მაგრამ რამდენად სიმაღლე არის ნაგულისხმევი ზომა? არ არსებობს გზა 100% გარკვეული, რადგან მომხმარებელს შეუძლია შეცვალოს მათი ნაგულისხმევი შრიფტის ზომა მათი ბრაუზერები, მაგრამ მას შემდეგ, რაც ყველაზე ხალხი არ შეიძლება ვივარაუდოთ, რომ ყველაზე ბრაუზერები აქვს შრიფტის ზომა 16px. ასე რომ დროის უმრავლესობა 1 = = 16px .
იფიქრეთ Pixels- ში, გამოიყენეთ Ems- ის ღონისძიება
ერთხელ თქვენ იცით, რომ ნაგულისხმები შრიფტის ზომა არის 16px, შეგიძლიათ გამოიყენოთ ems დაუშვას თქვენი კლიენტების გაზომვა გვერდზე ადვილად მაგრამ ვფიქრობ პიქსელი თქვენი შრიფტის ზომის.
ამბობენ, რომ თქვენ გაქვთ sizing სტრუქტურა მსგავსი რამ:
- სათაური 1 - 20px
- სათაური 2 - 18px
- სათაური 3 - 16px
- მთავარი ტექსტი - 14px
- ქვე ტექსტი - 12px
- სქოლიოები - 10px
თქვენ შეგიძლიათ განსაზღვროთ, რომ ამ გზით ზომები გაზომვისთვის, მაგრამ მაშინ, როდესაც IE 6 და 7-ის გამოყენებით ვეღარ შეძლებთ გვერდის ზომის შეცვლას. ასე რომ, თქვენ უნდა გადაიყვანოთ ზომები, რათა ems და ეს მხოლოდ საკითხია გარკვეული მათემატიკის:
- სათაური 1 - 1.25მი (16 x 1.25 = 20)
- სათაური 2 - 1.125მი (16 × 1.125 = 18)
- სათაური 3 - 1 სთ (1 სთ = 16px)
- მთავარი ტექსტი - 0.875მი (16 x 0.875 = 14)
- ქვე-ტექსტი - 0.75მი (16 x 0.75 = 12)
- სქოლიოები - 0.625მი (16 x 0.625 = 10)
ნუ დაივიწყებთ მემკვიდრეობას!
მაგრამ ეს არ არის ყველა ემისი. სხვა რამ, რაც უნდა გვახსოვდეს, არის ის, რომ ისინი მშობლის ზომას იღებენ. ასე რომ, თუ თქვენ გაქვთ წყობილი ელემენტები სხვადასხვა შრიფტის ზომები, თქვენ შეიძლება დასრულდეს ერთად შრიფტი ბევრად უფრო პატარა ან უფრო დიდი ვიდრე თქვენ ველით.
მაგალითად, თქვენ შეიძლება ჰქონდეთ სტილის ფურცელი:
p {font-size: 0.875em; }
.footnote {font-size: 0.625em; }
ეს გამოიწვევს შრიფტებს, რომლებიც 14px და 10px ძირითადი ტექსტი და სქოლიოები შესაბამისად. მაგრამ თუ ქვეპუნქტში ნათქვამია პუნქტი, შეიძლება დასრულდეს ტექსტით, რომელიც არის 8.75px ვიდრე 10px. სცადეთ იგი, დააყენეთ ეს ზემოთ CSS და შემდეგ HTML დოკუმენტში:
ეს შრიფტი 14px ან 0.875 ems სიმაღლეა.
ამ პუნქტში არის სქოლიო.
მიუხედავად იმისა, რომ ეს არის მხოლოდ სქოლიო პუნქტი.
სქოლიო ტექსტი რთულია წაიკითხოს 10px- ზე, თითქმის დაუსაბუთებელია 8.75px- ზე.
ასე რომ, როდესაც თქვენ იყენებთ ems, თქვენ უნდა იცოდეს ზომის მშობელი ობიექტების, ან თქვენ დასრულდება მდე ზოგიერთი მართლაც უცნაური ზომის ელემენტები თქვენს გვერდზე.