შეიტყვეთ, თუ როგორ ვებ ბრაუზერები განსაზღვრავენ დისპლეის გამოყენებით პროცენტული ღირებულებებს
მრავალპროფილიანი საპასუხო ვებ დიზაინის მქონე სტუდენტს აქვს რთული პერიოდი სიდიდის ღირებულებების მიხედვით. კონკრეტულად, არსებობს დაბნეულობა, თუ როგორ ბრაუზერის ითვლის იმ პროცენტული. ქვემოთ მოცემულია დეტალური განმარტება იმის შესახებ, თუ როგორ მუშაობს პროცენტული მუშაობა სიღრმისეული გათვლების შესახებ საპასუხო ვებ-გვერდზე.
გამოყენებით პიქსელები სიგანე ღირებულებები
როდესაც პიქსელზე სიგანე გამოიყენებთ, შედეგი ძალიან მარტივია. თუ თქვენ გამოიყენებთ CSS, რომ ელემენტის სიგანეზე 100 პიქსელის ფართო სიგანეზე ელემენტის სიგანე დააყენოთ, ეს ელემენტი იმავე ზომით იქნება, როგორც ის, რომ თქვენ მითითებული გაქვთ 100 პიქსელი ფართო ვებ-გვერდის შინაარსი ან ძირი გვერდი. Pixels არის აბსოლუტური მნიშვნელობა, ასე რომ 100 პიქსელი 100 პიქსელია, მიუხედავად იმისა, თუ თქვენი დოკუმენტიდან გამოჩნდება ელემენტი. სამწუხაროდ, pixel ღირებულებები ადვილად გასაგები, ისინი არ მუშაობს კარგად საპასუხო საიტებზე.
ეთან მარკოტემ ტერმინი "საპასუხო ვებ-დიზაინი" მოიხსენია და ამ მიდგომას განმარტა, როგორც სამი ძირითადი პრინციპის შემცველი:
- სითხის ქსელი
- სუფთა მედია
- მედია შეკითხვებს
პირველი ორი ქულა, სითხის ქსელი და სითხის მედია, მიიღწევა პროცენტული, პიქსელების ნაცვლად, ღირებულებების ზომისთვის.
სიხშირის მნიშვნელობების პროცენტული გამოყენება
ელემენტის სიგანეზე დამონტაჟებისას პროცენტებს იყენებთ, ფაქტობრივი ზომა, რომელიც ელემენტებს აჩვენებს, განსხვავდება იმის მიხედვით, თუ სად არის დოკუმენტი. პროცენტები შედარებით ღირებულებაა, რაც იმას ნიშნავს, რომ ნაჩვენებია ზომა თქვენს დოკუმენტში სხვა ელემენტებთან შედარებით.
მაგალითად, სურათის სიგანე 50% -მდე, ეს არ ნიშნავს იმას, რომ გამოსახულება გამოჩნდება მისი ნორმალური ზომის ნახევარზე. ეს არის საერთო მიდგომა.
თუ სურათზე გამოსახულია 600 პიქსელი, მაშინ გამოიყენეთ CSS ღირებულება 50% -ზე, არ ნიშნავს იმას, რომ ეს ბრაუზერში 300 პიქსელია. ეს პროცენტული მნიშვნელობა გამოითვლება იმ ელემენტზე, რომელიც შეიცავს სურათს და გამოსახულებას არა აქვს. თუ კონტეინერი (რომელიც შეიძლება იყოს განყოფილება ან სხვა HTML ელემენტი) არის 1000 პიქსელი ფართო, მაშინ სურათზე გამოჩნდება 500 პიქსელი, რადგან ეს ღირებულება არის კონტეინერის სიგანე 50%. თუ შემცველი ელემენტი 400 პიქსელია, მაშინ სურათი მხოლოდ 200 პიქსელზე იქნება ნაჩვენები, რადგან ეს ღირებულება კონტეინერის 50% შეადგენს. გამოსახულების კითხვა აქ 50% ზომაა, რომელიც მთლიანად დამოკიდებულია ელემენტზე, რომელიც შეიცავს მას.
გახსოვდეთ, საპასუხო დიზაინი არის სითხე. შაბლონი და ზომები შეცვლილია როგორც ეკრანის ზომა / მოწყობილობის ცვლილებები . თუ ფიქრობთ ამის შესახებ ფიზიკური, არასამთავრობო ვებ პირობები, ეს იგივეა, რომელსაც მუყაოს ყუთი, რომ თქვენ შევსების შეფუთვა მასალა. თუ ამბობთ, რომ ყუთი უნდა იყოს ნახევარი სავსე მასალისაგან, საჭიროა შეფუთვათა რაოდენობა, რომელიც დამოკიდებულია ყუთში. იგივე ითვალისწინებს ვებ დიზაინში პროცენტული ფართო სიდიდისთვის.
სხვა პროცენტებზე დაფუძნებული პროცენტული მაჩვენებლები
სურათის / კონტეინერის მაგალითში მე გამოვიყენე pixel მნიშვნელობები შემცველი ელემენტისთვის იმისთვის, რომ ნახოთ თუ როგორ გამოჩნდებოდა სურათი. სინამდვილეში, შემცველი ელემენტიც იქნება მითითებული პროცენტული და გამოსახულება ან სხვა ელემენტები, რომ კონტეინერში იქნება მათი ღირებულებები პროცენტული პროცენტული მაჩვენებლის მიხედვით.
აქ არის კიდევ ერთი მაგალითი, რომელიც აჩვენებს ამას პრაქტიკაში.
ამბობენ, რომ გაქვთ საიტი, სადაც მთელი საიტი შეიცავს "კონტეინერის" კლასის (საერთო ვებ დიზაინის პრაქტიკის) განყოფილებას. შიგნით რომ განყოფილება არის სამი სხვა განყოფილება, რომელიც საბოლოოდ სტილი იქნება 3 ვერტიკალური სვეტის სახით. ეს HTML შეიძლება ასე გამოიყურებოდეს:
ახლა შეგიძლიათ გამოიყენოთ CSS, რომ "კონტეინერის" დივიზიონის ზომა 90% -ის დასადგენად. ამ მაგალითში, კონტეინერის განყოფილებას არ გააჩნია სხვა ელემენტი, რომელიც გარშემორტყმულია იმ ორგანოს გარდა, რომელსაც ჩვენ არ ვაყენებთ რაიმე კონკრეტულ მნიშვნელობას. ჩვეულებრივ, სხეული 100% -იანი ბრაუზერის ფანჯარაში გამოიტანს. ამიტომ, "კონტეინერის" განყოფილების პროცენტული მაჩვენებლები ბრაუზერის ფანჯრის ზომაზე იქნება დაფუძნებული. როგორც ბრაუზერის ფანჯრის ცვლილებები ზომა, ასე იქნება ზომა ამ "კონტეინერში". ასე რომ, თუ ბრაუზერის ფანჯარა 2000 პიქსელია, ეს განყოფილება გამოჩნდება 1800 პიქსელით. ეს გამოითვლება 2000 წლის 90-ს (2000 x. 90 = 1800)), რაც ბრაუზერის ზომას წარმოადგენს.
თუ "კონტეინერში" აღმოჩენილი თითოეული "col" ქვედანაყოფი 30% -ის ზომაზეა მითითებული, მაშინ თითოეული მათგანი 540 პიქსელი იქნება ამ მაგალითში. ეს გამოითვლება, როგორც 1800 პიქსელების 30%, რომელიც კონტეინერს ანიჭებს (1800 x 30 = 540). თუ ამ კონტეინერის პროცენტში შეიცვალა, ეს შიდა განყოფილებებიც შეიცვლებიან იმ ზომით, რომლითაც ისინი დამოკიდებულნი არიან, რადგან ისინი დამოკიდებული არიან ამ ელემენტზე.
ვივარაუდოთ, რომ ბრაუზერის ფანჯრები 2000 პიქსელია, მაგრამ კონტეინერის პროცენტული მაჩვენებელი 80% -ის ნაცვლად 90% -ის ნაცვლად შეიცვლება. ეს იმას ნიშნავს, რომ იგი 1600 პიქსელზე გადის (2000 x .80 = 1600). მაშინაც კი, თუ ჩვენ არ შეცვლით CSS ჩვენი 3 "კოლა" დივიზიონის ზომა და დატოვონ ისინი 30% -ზე, ისინი სხვაგვარად გამოიტანენ მას შემდეგ, რაც მათი შემცველი ელემენტია, რაც კონტექსტშია, რომ ისინი ზომით შეიცვალა. ამ 3 სამმართველოს ახლა მიეწოდება 480 პიქსელი ფართო ფორმა, რომელიც შეადგენს 1600-ს, ან კონტეინერის ზომა (1600 x .30 = 480).
ამასთან კიდევ უფრო გაღვიძება, თუ გამოსახულება იყო ერთ-ერთი ამ "col" ქვედანაყოფში და ეს სურათი ზომის გამოყენებით პროცენტული იყო, მისი კონტექსტის კონტექსტი კი "კოლა" იქნება. როგორც "col" განყოფილება შეიცვალა ზომა, ასე რომ გამოსახულების შიგნით. ასე რომ, თუ ბრაუზერი ან "კონტეინერის" ზომა შეიცვალა, ეს გავლენას მოახდენს სამი "col" ქვედანაყოფზე, რაც, თავის მხრივ, შეცვლის სურათის ზომას "col". როგორც ხედავთ, საქმე ეხება პროცენტული ორიენტირებული ზომის ღირებულებებს.
როდესაც განიხილავთ, თუ რა ელემენტის შიგნით შედის ვებ გვერდი, როდესაც პროცენტული მნიშვნელობა გამოიყენება მისი სიგანეზე, უნდა გესმოდეთ იმ კონტექსტში, რომელშიც ამ ელემენტს აქვს გვერდი მარკუსში.
ჯამში
პროცენტული მაჩვენებლები მნიშვნელოვან როლს თამაშობენ საპასუხო ვებსაიტებზე განლაგების შესაქმნელად. ხართ თუ არა გამოსახულებით გამოსახულებული გამოსახულებები ან პროცენტული სიგანის გამოყენება ჭეშმარიტი სითხის ქსელის შესაქმნელად, რომელთა ზომები ერთმანეთთან შედარებით, გაგება ამ გათვლებით იქნება საჭირო იმისათვის, რომ მიიღოთ თვალი.