CSS-dən istifadə edərək məsuliyyətli dizayn şəkilləri necə əlavə etmək olar?
Bu gün məşhur veb saytlara baxın və gördüyünüz əmin olduğunuz bir dizayn müalicəsi böyük, ekranı spanning fon şəkilləri. Bu görünüşləri əlavə etməklə problemlərdən biri veb-saytların müxtəlif ekran ölçülərinə və cihazlarına cavab verməsi lazım olan ən yaxşı təcrübədən gəlir - məsuliyyətli web dizaynı kimi tanınan bir yanaşma.
Veb saytınızın düzəlişləri müxtəlif ekran ölçüləri olan dəyişikliklər və ölçekler olduğundan, bu fon şəkilləri müvafiq olaraq ölçüsünü ölçməli olmalıdır.
Əslində, bu "maye şəkillər" həssas veb saytların əsas hissələrindən biri (maye şəbəkə və media sorğuları ilə birlikdə). Bu üç ədəd əvvəllərdən etibarən həssas web dizaynının əsasını təşkil edirdi, lakin həmişə bir siteye cavab verən inline şəkillər əlavə etmək olduqca asandır (inline images HTML formatlaşdırma hissəsi kimi kodlaşdırılan qrafiklərdir) arxa fon şəkilləri ilə eyni olan (CSS fon xüsusiyyətləri istifadə edərək səhifəyə səpilmiş olan) uzun müddət bir çox web dizaynerləri və ön sonu işləyicilərinə əhəmiyyətli bir problem vermişdir. Xoşbəxtlikdən, CSS-də "fon-ölçülü" mülkiyyətin əlavə edilməsi bu mümkündür.
Ayrı bir məqalədə, mən bir pəncərə uyğun görünüşlər uzatmaq üçün CSS3 əmlak fon-ölçüsü istifadə necə əhatə, lakin bu əmlak üçün yerləşdirmək üçün daha yaxşı, daha faydalı bir yol var. Bunu etmək üçün aşağıdakı əmlakı və dəyər birləşməsini istifadə edəcəyik:
fon ölçüsü: örtük;
Kapak sözü mülkiyyəti, pəncərənin nə qədər böyük və ya kiçik olmasından asılı olmayaraq, pəncərə uyğun görünüşü ölçmək üçün brauzerə məlumat verir. Görünüş bütün ekranı əhatə etmək üçün ölçeklendirilir, ancaq orijinal orantılar ve görünüş oranı , görüntünün kendiliğinden bozulmasını önleyecek şekilde korunur.
Pəncərədə bütün pəncərə səthinin örtülməsinə imkan verən görüntü mümkün qədər böyükdür. Bu, səhifənizdə boş ləkələr və ya görüntüdə hər hansı bir təhrif olmadığı anlamına gəlir, ancaq ekranın bəzi aspekt nisbətlərinə və sözügedən görüntüyə görə şəkillərin bəzilərinin kəsilməsinə səbəb ola bilər. Məsələn, arxa fon mövqeyində istifadə etdiyiniz dəyərlərə əsasən, bir görüntünün kənarları (üst, alt, sol və ya sağ) şəkillərdə kəsilə bilər. Arka planı "yuxarı sola" istiqamətləndirirsinizsə, şəkildəki hər hansı bir artı aşağı və sağ tərəfdən çıxacaq. Arxa planı mərkəzləşdirirsinizsə, çoxluq hər tərəfdən çıxacaq, ancaq bu artıqlıq yayıldığı üçün hər hansı bir tərəfə təsir az xidmət göstərəcəkdir.
Arxa ölçüsü necə istifadə edilir: örtüyü;
Arxa planınızı yaradaraq, olduqca böyük bir görünüş yaratmaq yaxşı bir fikirdir. Brauzerlər, görünüşün keyfiyyətinə nəzərəçarpacaq dərəcədə təsir göstərmədən, görünüşünü daha kiçik bir görünə bilər, bir brauzer orijinal ölçüsündən daha böyük ölçüdə bir ölçüyə qədər ölçüdükdə, görmə keyfiyyəti aşağı düşəcək, bulanıklaşır və pixelated olur. Buna baxmayaraq, bütün ekranlara nəhəng şəkillər çatdığınız zaman səhifəniz performans hiti alır.
Bunu etdiyiniz zaman, həmin şəkilləri yükləmə sürəti və veb çatdırılması üçün lazımi şəkildə hazırlayın . Sonda, yüklənmə sürəti üçün kifayət qədər böyük bir şəkil ölçüsü və keyfiyyəti və ağıllı fayl ölçüsü arasında xoşbəxt ortanı tapmaq lazımdır.
Ölçəkli fon şəkillərindən istifadə etmək üçün istifadə edilən ümumi üsullardan biri, həmin görüntünün bir səhifənin tam fonunu götürməsini istəmədikdə, həmin səhifənin geniş və masa üstü bir kompüterdə görünməsini və ya daha kiçik və əllə, mobil telefonun cihazlar.
Görünüşünüzü web hostunuza yükləyin və fonunuza CSS-yə əlavə edin:
background-image: url (atəşfəşanlıq-over-wdw.jpg);
background-repeat: no-təkrar;
fon-mövqeyi: mərkəz mərkəzi;
background-attachment: sabit;
Öncəki brauzer CSS-i əlavə edin:
-webkit-background-size: örtüyü;
-moz-fon-ölçüsü: örtüyü;
-o-fon-ölçüsü: örtük;
Sonra CSS əmlakını əlavə edin:
fon ölçüsü: örtük;
Cihazlar dəyişən müxtəlif görünüşlər istifadə
Bir masa üstü və ya dizüstü kompüter təcrübəsi üçün həssas dizayn vacibdirsə, Webə çıxa bilən cihazların müxtəlifliyi əhəmiyyətli dərəcədə artıb və ekran ölçüləri daha çox olur.
Əvvəllər qeyd edildiyi kimi, smartfondakı çox böyük məsafəli fon şəklinin yüklənməsi, məsələn, effektiv və ya bant genişliyi şüurlu dizayn deyil.
Media sorgularını görüntülenecek cihazlar üçün uyğun olan şəkilləri təqdim etmək üçün necə istifadə edə biləcəyinizi və mobil cihazlarla veb saytınızın uyğunluğunu daha da yaxşılaşdırın.
Jennifier Krynin tərəfindən hazırlanan əsər. Jeremy Girard 9/12/17 tərəfindən redaktə edildi