Veb brauzerlərin faiz dəyərlərini istifadə edərək bir ekranı necə müəyyənləşdirdiyini öyrənin
Həssas veb dizaynın bir çox tələbəsi, genişlik dəyərlərinə görə faizlər istifadə edərək çətin bir zaman keçirir. Xüsusən brauzerin bu faizləri necə hesabladığı ilə qarışıqlıq var. Aşağıda həssas veb saytlarda genişlik hesablamaları üçün necə faizlərin işləməsi barədə ətraflı məlumat tapa bilərsiniz.
Genişlik dəyərləri üçün Piksel istifadə
Pikselləri genişlik dəyəri olaraq istifadə etdikdə, nəticələr çox sadədir. Sənədin başlığında bir elementin genişlik dəyərini 100 piksel genişlikdə təyin etmək üçün CSS-dən istifadə etsəniz, bu element veb saytın məzmununda və ya altbilgisində və ya digər sahələrində 100 piksel genişliklə təyin etdiyiniz ölçüyə bərabər olacaq səhifə. Piksellər mütləq bir dəyərdir, buna görə 100 piksel sənədinizdə bir maddənin harada olmağından asılı olmayaraq 100 pikseldir. Təəssüf ki, pixel dəyərləri anlamaq asan olsa da, cavab verən saytlarda yaxşı iş görmürlər.
Ethan Marcotte, bu yanaşmanın 3 əsas müəllifi olduğu kimi izah edərək, "məsuliyyətli web dizaynı" termini yaratdı:
- Bir maye şüaları
- Fluid media
- Media sorğuları
Bu ilk iki nöqtə, maye grid və maye media, dəyərləri ölçmək üçün piksel əvəzinə yüzdə istifadə etməklə əldə edilir.
Genişlik dəyərlərinə görə faizlərin istifadə edilməsi
Bir element üçün genişlik qurmaq üçün faizlər istifadə etdikdə, elementin göstərdiyi faktiki ölçüsü sənəddə olduğu yerə görə dəyişir. Yüzdeler nisbi bir dəyərdir, yəni göstərilən ölçüsü sənədinizdəki digər elementlərə nisbətən.
Məsələn, bir görüntünün enini 50% -ə təyin edərsəniz, bu görünüşün normal ölçüsünün yarısı göstərilir. Bu ümumi səhv anlayışdır.
Görüntünün doğuşu 600 piksel genişliyində, 50% -də göstərmək üçün CSS dəyərindən istifadə etmirsə, bu veb brauzerdə 300 piksel geniş olacağı anlamına gəlmir. Bu faiz dəyəri şəkilin özündən deyil, həmin təsvir olan elementə əsasən hesablanır. Konteyner (bir bölmə və ya digər HTML elementi ola bilən) 1000 piksel genişliyində, bu rəqəm konteyner genişliyinin 50% -i olduğundan, şəkil 500 pikseldə göstəriləcək. Ehtiyac olan element 400 piksel genişliyində, şəkil yalnız konteynerin 50% -dən bəri, yalnız 200 pikseldə göstərilir. Burada sözügedən şəkil tamamilə asılı olan elementdən asılı olan 50% ölçüsünə malikdir.
Xatırladaq ki, dizayn sıxılmışdır. Ekranın ölçüsü / qurğu dəyişməsi kimi layouts və ölçüləri dəyişəcək. Əgər bu haqda fiziki, qeyri-web şərtləri ilə düşünsəniz, qablaşdırma materialı ilə doldurduğunuz karton qutuya bənzəyir. Əgər qutunun həmin materialla yarım dolu olduğunu söyləsəniz, lazım olan qablaşdırma miqdarı qutunun ölçüsündən asılı olaraq dəyişəcəkdir. Eyni veb dizaynında yüzdə eni ilə bağlıdır.
Digər faizlərə əsasən faizlər
Görünüş / konteyner nümunəsində, məntiqi elementin göstərilməsi üçün piksel dəyərlərindən istifadə edildik. Əslində, ehtiva edən element də bir faizlə təyin olunacaq və bu konteyner daxilində olan şəkil və ya digər elementlər dəyərlərini yüzdə bir faiz əsasında əldə edəcəklər.
İşdə bunu göstərir ki, başqa bir nümunə.
Bütün saytın "konteyner" (ümumi bir web dizayn praktikası) sinfi olan bir bölmədə olduğu bir veb saytınız olduğunu söyləyin. Bu diviziyanın içərisində üç nizamlı bölmə var ki, nəticədə 3 vertikal sütun kimi görünəcək. HTML bu kimi görünə bilər:
İndi "konteyner" bölməsinin ölçüsünü 90% demək üçün CSS-dən istifadə edə bilərsiniz. Bu misalda, konteyner bölməsində bədəndən başqa bir şey yoxdur ki, biz müəyyən bir dəyər vermədik. Default olaraq, bədən brauzer pəncərəsinin 100% -ni göstərəcəkdir. Buna görə, "konteyner" bölməsinin faizləri brauzer pəncərəsinin ölçüsünə əsaslanır. Brauzer pəncərəsinin ölçüsü dəyişdikcə, bu "konteyner" in ölçüsü də olacaqdır. Beləliklə, brauzer pəncərəsi 2000 piksel genişliyində, bu bölmə 1800 pikseldə göstərilir. Bu, brauzerin ölçüsü olan 2000 (2000 x .90 = 1800) 'in 90% -i olaraq hesablanır.
"Konteyner" içərisində olan "col" bölmələrinin hər biri 30% -ə qədər ölçülürsə, bu nümunədə onların hər biri 540 piksel geniş olacaq. Konteynerin göstərdiyi 1800 pikselin 30% -i (1800 x .30 = 540) hesablanır. Əgər biz bu konteynerin faizini dəyişdirsək, bu daxili bölmələr həmin tərkib elementindən asılı olduğundan göstərdikləri ölçüdə dəyişəcəkdir.
Gözləyək ki, brauzer pəncərələri 2000 piksel genişlikdə qalır, amma konteynerin faiz dəyərini 90% yerinə 80% -ə dəyişir. Yəni indi 1600 piksel genişlikdə (2000 x .80 = 1600) göstərəcək. CSS-i 3 "col" bölmənin ölçüsünə dəyişməyəcəyik və onları 30% -də tərk etsək də, onların tərkib elementi olduğundan, onlar dəyişdirmişdir. Həmin 3 bölmə indi hər biri 480 piksel genişliyə malikdir, bu da 1600-dən 30% -ə qədər və ya konteynerin ölçüsü (1600 x .30 = 480).
Bunu daha da artıraraq, bu "kol" bölmələrindən birində bir şəkil varsa və bu rəqəm bir faizlə ölçülürsə, onun ölçülməsi üçün kontekst "col" özü olacaqdır. "Kol" bölməsinin ölçüsü dəyişdikcə, onun içərisində belə bir görüntü olardı. Beləliklə, brauzerin ölçüsü və ya "konteyner" dəyişdikdə, bu, "col" içərisində görüntünün ölçüsünü dəyişdirən üç "kol" bölməsinə təsir edəcəkdir. Gördüyünüz kimi, faizlə idarə olunan ölçülü dəyərlərə gəlir.
Bir web səhifənin içərisində bir element necə genişlik üçün istifadə edildiyini düşündüyünüz zaman, bu elementin səhifənin düzəlişində olduğu konteksti anlamaq lazımdır.
Xülasə
Faizlər, həssas saytlar üçün düzəliş yaratmaqda kritik rol oynayır. Etibarlı şəkildə şəkilləndirdiyiniz və ya ölçüləri genişliklərdən istifadə edərək, ölçüləri bir-birinə nisbətən həqiqətən maye bir şəffaflıq yaratmaq üçün, bu hesablamaları anlamaq istədiyiniz arzunuza nail olmaq üçün lazım olacaqdır.