Adaptiv tərtibat üçün üslublar. Cavab verən tərtibat: dərslər və ya birbaşa döyüşə? Uyğunlaşan düzümü mənimsəmək çətindir?
Saytınızın tərtibatının Iphone və ya planşetlərdə gözəl görünməsi üçün o, bu cihazlara uyğunlaşdırılmalıdır və bunu yüksək keyfiyyətlə etmək vacibdir...
Cavab verən sayt tərtibatı(bəzən buna mobil dostluq da deyilir) - ƏTRAFLI və dərsdəki kimi addım-addım:
Nəzərə alın ki, Yandex və Google-un öz alətləri var, onların köməyi ilə saytın uyğunlaşma qabiliyyətini yoxlaya bilərsiniz. Webmaster-in yeni versiyasında Yandex belədir: alətlər - mobil səhifələri yoxlamaq.
Əgər cavab verən veb-sayt dizaynını necə edəcəyinizi bilmək istəyirsinizsə, bu, aşağıda və misallarda ətraflı şəkildə yazılacaq, AMMA css bacarıqlarınız yoxdursa, bu daha çətin olacaq. Və ya proqramçı və ya webmaster bunu edə bilər.
Cavab verən vebsayt dizaynı- səhifə pəncərəsinin enini və sütunların və yan panellərin enini%, adaptivdə - px ilə təyin etməyi nəzərdə tutur.
Diqqət yetirin: əgər saytınız üçün populyar bir mühərrikiniz varsa, məsələn, wordpress, onda onların adaptiv dizaynı ilə "baş ağrısı" yoxdur - orada hər şey bir neçə siçan kliklə edilir - sadəcə plaqini quraşdırın və aktivləşdirin və bu qədər ). Məsələn, WP üçün - mən WPtouch-dan istifadə etdim - bu, çox yaxşıdır, amma tam zamanlı bir proqramçı varsa, bu anı fərdi olaraq etmək daha yaxşıdır.
Anlamalısınız ki, ümumiyyətlə, adaptiv tərtibatla onlar tez-tez manipulyasiya edirlər: eni (elementin eni: maksimum eni və minimum eni), float (ətrafına sarın, pəncərənin eni azaldıqca silinir), şrift ölçüsü (hərflərin hündürlüyünü dəyişdirin).
1) Əvvəlcə xüsusi bir meta etiketi qeydiyyatdan keçirməlisiniz müxtəlif növ cihazlar üçün:
2) Adaptiv səhifə parametrləri (eni və hündürlüyü):
Konteyner(
eni: 800px
maksimum eni: 90%
}
Bu halda, konteynerin sabit eni təyin edilir, lakin o, pəncərənin eninin 90% -dən çox olmamalıdır və bu, çox rahatdır - sonra saytın özü pəncərənin ölçüsünə uyğunlaşacaqdır.
3) Bütün saytın şəkilləri üçün Css adaptiv tərtibatı:
img (maksimum en: 100%;
hündürlük: avtomatik;
}
Burada bunu göstəririk şəkil ölçüsü: maksimum eni gözün 100% -dən çox olmamalıdır - bu şəkildə şəkil özü telefonun və ya digər gadgetın ölçüsünə uyğunlaşır. Budur belə sadə bir üsul - adaptiv təsvir dizaynı.
4) Uyğunlaşan veb sayt mətn tərtibatı: bu halda şriftin hündürlüyü ilə manipulyasiyalar baş verir: font-size və digər parametrlər.
Qırılma sözü (söz bağlama: qırılma söz; )
Uzun qeyri-defis sözlər varsa, bu CSS defis üçün nəzərdə tutulub.
Şrift ölçüsündə bir çox səhv var: Yandex yazmağı sevir - Mətnin ölçüsü mobil cihazlarda oxumaq üçün çox kiçik - bunun üçün bunu edirik:
bədən (şrift ölçüsü: 16px) - bu, bu xətanın qarşısını alacaq və p etiketi və bağlantılar üçün onu ayrıca qoymalısınız. Məhz bədən teqinin şrift ölçüsü olduğu üçün: 12 və ya 14 px - bu səhvin baş verməsinin səbəbi də budur! Və hökm budur:
5) 3 sütunlu dizaynın və ya 2 sütunlu layoutun uyğunlaşdırılması- bunda mürəkkəb bir şey yoxdur, əgər hər şey div-də edilirsə - ah, o zaman ümumiyyətlə sarğı ləğv etməlisiniz, yəni floatı heç bir yerə qoymayın və bloklar aşağı düşəcək.
6)Video üçün cavab verən CSS(Habrdan):
video(
mövqe: nisbi;
alt doldurma: 56,25%
hündürlük: 0
daşqın: gizli;
) .video iframe,
.video obyekti
.video yerləşdirmə(
mövqe: mütləq;
yuxarı: 0
sol: 0
eni: 100%
hündürlük: 100%;
}
Media sorğuları - media sorğuları
Adaptiv dizayn yaratmaq üçün tez-tez istifadə olunur media sorğuları(ekran eni ölçülərinə əsasən qaydaları təyin edirlər - ekranın qətnaməsinə əsasən).
Budur stub media sorğuları- adaptiv dizaynı hansı qətnamələrə əsasən etmək lazımdır:
@media yalnız ekran və (maksimum en: 1200px) (
@media yalnız ekran və (maksimum en: 992px) (
/* Kiçik Cihazlar, Planşetlər */
@media yalnız ekran və (maksimum en: 768px) (
@media yalnız ekran və (maksimum en: 480px) (
/* Xüsusi, iPhone Retina */
@media yalnız ekran və (maksimum en: 320px) (
/**/
}
/*========= Mobil Birinci Metod ==========*/
/* Xüsusi, iPhone Retina */
@media yalnız ekran və (min-en: 320px) (
/**/
}
/* Əlavə Kiçik Cihazlar, Telefonlar */
@media yalnız ekran və (min-en: 480px) (
/**/
}
/* Kiçik Cihazlar, Planşetlər */
@media yalnız ekran və (min-en: 768px) (
/**/
}
/* Orta Cihazlar, Masaüstü kompüterlər */
@media yalnız ekran və (min-en: 992px) (
/**/
}
/* Böyük Cihazlar, Geniş Ekranlar */
@media yalnız ekran və (min-en: 1200px) (
/**/
}
Lakin sütunların və blokların enini bir dəfəyə faiz kimi təyin etməklə media sorğularından da qaça bilərsiniz.
Media sorğuları üçün yuxarıdan başlayırıq: etdiyimiz hər şey maksimum genişlik üçün etibarlıdır: 768 480-də də işləyəcək.
Saytları mobil cihazlara uyğunlaşdırarkən hansı problemlər var
Məsələn, Yandex bunu verə bilər - Üfüqi sürüşmə var:
Doldurma və ya kənar ilə bir şeyiniz var - onları ana seçicilər (bloklar) üçün sıfırlayın və xoşbəxt olacaqsınız.
Və sonunda Yandex Webmaster bunu göstərir:
Mən 4 saat eyni şeyi etdim, ilk dəfə həmişə çətin olur! Ancaq bir neçə saatdan sonra bunu edə bilərsiniz! Və biz onu yenidən yoxlamaq üçün vebmasterə göndəririk ki, daha sürətli olsun - bu SEO üçün vacibdir.
Ümumiyyətlə, bu gün bir çox insanlar hazır blanklardan istifadə edirlər - Bootstrap və praktiki olaraq heç bir əzab yoxdur -
“Sosial Media Məzmun Marketinqi: Abunəçilərin başına necə girmək və onları brendinizə aşiq etmək” adlı yeni kitabımızı işıq üzü görmüşük.
Xüsusilə, bu texnologiya saytın müxtəlif növ cihazlarda bərabər şəkildə göstərilməsini təmin etmək üçün fəal şəkildə istifadə olunur: kompüterlər / noutbuklar və müxtəlif ekran ölçüləri olan smartfonlar / planşetlər.
Bu gün HTML5 işarələmə dili və CCS3 kaskad stil cədvəllərindən istifadə edərək cavab verən veb sayt yaradılır. Lakin müvafiq texnologiyalar bütün populyar brauzerlər üçün standart halına gələnə qədər JavaScript proqramlaşdırma dili müvafiq məqsədlər üçün istifadə olunurdu. Hətta əvvəllər (2010-cu ilə qədər) onlar eyni səhifələrin bir neçə versiyasını, lakin fərqli işarələmə ilə yaratmalı idilər ki, onların hazırladıqları sayt müxtəlif ekranlarda düzgün göstərilsin.
Niyə cavab verən səhifə tərtibatına ehtiyacınız var?
Nisbətən yaxın vaxtlara qədər, brauzerin altındakı bir çox saytları ziyarət edərkən, səhifəni üfüqi olaraq sürüşdürən bir sürüşdürmə görə bilərsiniz. Bu, məsələn, İnternet brauzerinin pəncərəsi tam ekrana qədər genişləndirilməsə də, onun nisbətən kiçik bir sahəsini tutduqda baş verdi. Şəklin göstərildiyi ekranın həlli 800-ə 600 və ya daha çox, 640-a 480 piksel olduqda, demək olar ki, həmişə görünə bilər.
Bu gün hətta mobil cihazların sahibləri belə bir şeylə nadir hallarda qarşılaşırlar. Bunun səbəbi təkcə müasir displeylərin ayırdetmə qabiliyyətinin HD və ya daha yüksək olması deyil, həm də cavab verən səhifə tərtibatının indi demək olar ki, standart halına gəlməsi ilə bağlıdır.
Cavab verən dizayn niyə və nə vaxt ortaya çıxdı?
21-ci əsrin ikinci onilliyinin əvvəllərində universal veb-səhifələrin inkişafına imkan verən texnologiyaların yaradılmasına güclü ehtiyac yarandı. Adaptiv dizaynın yaradılmasına və inkişafına səbəb olan əsas şərtlər bunlar idi:
- İnternetə yeni istifadəçilərin kütləvi axını;
- müxtəlif ekran qətnamələri olan bir çox cihazın ortaya çıxması;
- eyni məzmunlu səhifələrin bir neçə variantı olan saytlara qarşı sanksiyalar tətbiq etməyə başlayan axtarış sistemlərinin təzyiqi.
İlk yaradan şəxs rəsmi olaraq veb dizayneri Ethan Markottdur. 2010-cu ilin ortalarında o, müxtəlif iş sahəsi qətnamələri olan brauzerlərdə veb-səhifələrin normal göstərilməsi problemini həll etməli olan texnologiyadan bəhs etdiyi materialı dərc etdi.
Bir müddət sonra başqa bir tanınmış podkaster həmkarının danışdığı anlayışlara əlavələr təklif etdi.
Adaptiv layout nəyin köməyi ilə və necə yaradılır?
Uyğunlaşmanın necə qurulacağına dair sualın nəzərdən keçirilməsinə keçməzdən əvvəl istifadə olunan əsas texnologiyaları qısaca nəzərdən keçirmək lazımdır. İndi onlardan ikisi var: HTML5 və CSS3. Son vaxtlara qədər HTML4 və CSS2 istifadə olunurdu, lakin onlarla universal dizayn yaratmaq üçün JavaScript-dən də istifadə etməli idiniz.
CSS3 Cascading Style Sheets-in növbəti nəslidir. Bu texnologiya istifadəçinin brauzerində səhifə elementlərini göstərmək üçün qaydalar yaratmaq üçün nəzərdə tutulub. Bununla, məsələn, istifadəçinin müəyyən ekran qətnaməsində bir elementin hansı ölçüdə olması lazım olduğunu təyin edə və ya onun həmişə yerin müəyyən bir faizini tutması qaydasını təyin edə bilərsiniz (100% - bütün iş sahəsini doldurmaq). brauzer).
Məhz üçüncü nəsildə "media sorğuları" qaydası meydana çıxdı, ondan istifadə edərək layout dizayneri hər bir xüsusi icazə üçün ayrıca siniflər yarada bilər.
Çox vacib bir məqam!
Cascading Style Sheets 3-dən fərqli olaraq, CSS3-dən həssas dizayn üçün istifadə etməyi planlaşdıran şəxs bilməlidir ki, CSS2-dən fərqli olaraq, Cascading Style Sheets 3 obyektlərin ölçüsünü təyin etmək üçün piksellərdən deyil, faizlərdən istifadə edir.
HTML5-ə gəlincə, o, birbaşa səhifəni işarələmək üçün istifadə olunur, yəni müəyyən elementlərin harada yerləşdirilməli olduğunu göstərir. Obyektlərin rezolyusiyaya uyğunlaşması üçün HTML teq parametrləri əvvəllər CSS3 istifadə edərək yaradılmış sinifləri təyin edir.
Cavab verən tərtibatın sadə nümunəsi
Cavab verən tərtibatın nə olduğunu başa düşmək üçün nümunələr mümkün qədər sadə olmalıdır. Buna görə də, hazırlanmış təsvirin avtomatik olaraq brauzerin iş sahəsinin həllinə uyğunlaşdığı bir variantı nəzərdən keçirək.
Əvvəlcə HTML-dən istifadə edərək elementin özünü səhifəyə yerləşdirəcəyik:
DIV etiketi onu göstərir ki, tərkibində olan hər şey ayrı blokdur. Səhifədə belə bloklar çox olduqda, "sinif" atributu göstərilir. Bu, brauzerin müəyyən bir blok üçün hansı qaydanın tətbiq olunacağını başa düşməsi üçün lazımdır.
İndi sözdə qaydanın özünü yaratmalısınız
CSS konteyneri:
Div (en: 100%; mətn hizalama: mərkəzə; ) div img (ağırlıq: 100%; hündürlük: avtomatik; )
Bu kod sadəcə uyğunlaşma düzümü üçün icazələr təyin edir. Xüsusilə, hündürlüyü (hündürlük) avtomatik olaraq tənzimləyərkən, genişliyin (ağırlıq) həmişə veb brauzer müştəri sahəsinin eninin 100% olmalıdır.
Adaptiv düzülüş yoxlanılır
Adaptiv layoutu yoxlamaq üçün xüsusi vasitələr var. Məsələn, GoogleChrome brauzerində "F12" düyməsini basa bilərsiniz və sonra açılan paneldə smartfon və planşetin təsviri olan ikona vura bilərsiniz. Bu hərəkətdən sonra maraqların həllini təyin etməli olduğunuz daha bir neçə panel görünəcək.
Bunu daha da asanlaşdırmaq olar. Cavab verən dizaynın işlədiyini yoxlamaq üçün CTRL düyməsini basıb saxlayın və sonra "+" və ya "-" düyməsini sıxmalısınız. Bu hərəkətdən sonra səhifə müvafiq olaraq artmalı və ya azalmalıdır, lakin adaptiv tərtibatın tətbiq olunduğu element onun nisbətlərinin nisbətini qoruyacaq (və ya qaydalarda göstərilən başqa bir şey edin).
Cavab verən dizaynın tərtibatını sadələşdirən alətlər
Cavab verən dizayn tərtibatı olduqca vaxt aparan bir işdir. Buna görə də, bütün bu prosedurların həyata keçirilməsi üçün vaxtı azaltmaq üçün xüsusi vasitələrdən istifadə etmək daha yaxşıdır. Tanınmış Bootstrap* çərçivəsini onlardan biri adlandırmaq olar.
Məsələn, HTML və CSS üçün bu alət dəsti dizayn edərkən istifadə edə biləcəyiniz çoxlu sayda əvvəlcədən təyin edilmiş sinifləri ehtiva edir. Bütün qaydalara və standartlara uyğun olaraq, adaptiv elementlər yaratmağa imkan verən dinamikləri də ehtiva edir.
Onu istifadə etməyə başlamaq üçün ilk növbədə birbaşa CSS3 və HTML5-in özləri haqqında bilik əldə etməli, sonra isə çərçivənin xüsusiyyətlərini öyrənməlisiniz. Bununla belə, onunla işləməyin ən incəliklərini başa düşərək, sonradan adaptiv veb-sayt dizaynını inkişaf etdirmək üçün vaxtı dəfələrlə azalda bilərsiniz.
*Bootstrap Twitter Inc tərəfindən hazırlanmış açıq mənbə proqramdır. O, pulsuz paylanır və hər zaman məsləhət istəyə biləcəyiniz geniş icmaya malikdir.
HeavenWeb bloqunun bütün oxucularına salamlar. Bu gün bloqda mən sözdə adaptiv tərtibata bir nümunə verəcəyəm, həmçinin nümunə olaraq müxtəlif ekran qətnamələrinə uyğunlaşmanı nəzərə alaraq sadə bir tərtibatın necə qurulacağını göstərəcəyəm.
Sadə dillə desək, adaptiv və ya “cavab verən” tərtibat səhifənin açıldığı cihazın ölçüsünə və ekran həllinə uyğunlaşan blokların və elementlərin belə düzülüşü kimi başa düşülür.
Planşet kompüterlərin və smartfonların artan populyarlığı ilə veb ustalarından saytların göstərilməsi üçün yeni formatları və müvafiq olaraq bu saytların açıldığı yeni ekran qətnamələrini dəstəkləmək tələb olunur.
Ən kritik dəyər brauzer pəncərəsinin enidir. Ən büdcəli smartfonlarda minimum 240-360px təşkil edir, lakin əksər hallarda yenə də 480 piksel və daha yüksəkdir. Və bu, standart 1024 piksel genişlikli monitorların yarısından çoxdur.
Başqa bir vacib məqam da unudulmamalı olan böyük yüksək keyfiyyətli monitorlardır. Vebmasterin məqsədi saytı qətnaməyə uyğunlaşdırmaq və istənilən ekranda üfüqi sürüşmənin qarşısını almaqdır.
Bu, CSS media sorğuları, həmçinin minimum və maksimum eni və hündürlüyü müəyyən edilmiş məhdudiyyətlər daxilində məhdudlaşdıran üslub xüsusiyyətləri vasitəsilə əldə edilə bilər.
Ancaq bir nümunə ilə göstərmək daha yaxşıdır. Minimum elementlərlə sadə cavab verən tərtibat yaradaq, demo səhifəsində bitmiş nümunənin görünüşünü görə bilərsiniz:
Beləliklə, onun uyğunlaşması üçün tələblərimiz aşağıdakılardır:
- Əsas hissənin eni yüksək qətnamələrdə, lakin müəyyən bir dəyərə qədər uzanmalıdır, çünki çox uzun xətlər oxumaq üçün əlverişli deyil.
- Brauzerin eni azaldıqca, şəkillər əraziyə uyğunlaşmaq üçün mütənasib şəkildə kiçilməlidir.
- Eni 700 pikseldən az olan (minimum - portret yönümlü HD ekranlı planşet və ya smartfon) aşağıda yerləşən üç blok bir-birinin ardınca düzülməli və əsas blokun eninin 100%-ni tutmalıdır.
- Həmçinin, eyni zamanda, sol yan panel əsas hissəyə yer açaraq dar bir zolağa çökməlidir.
- Açılan menyu şəklində indi əsas blokun üstündə yerləşdirilməli olan yan paneli açıb bağlayan düyməni təmin edin.
Gəlin başlayaq. Mən index.html faylı və css və şəkillər qovluqlarını yaratdım, burada müvafiq olaraq üslub faylını və layoutdan kəsilmiş şəkilləri yerləşdirdim.
HTML faylında sol menyu və əsas hissə üçün müvafiq olaraq .left_side və .wrapper adlı iki kök konteyner yaradacağıq. .left_side biz loqo, sosial linklər və sıralanmamış menyu siyahısı üçün bəzi işarələmələr qoyacağıq.
Sağ əsas blokda biz hər bir postu .text_block sinfi ilə div ilə bağlayacağıq, Yandex abstrakt alətindən yer tutucu mətni və məsələn, şəkilləri əlavə edəcəyik.
Aşağıya üç .footer_block bloku əlavə edin, onları ümumi .footer-ə sarın. Məqalələrə H2, H3 başlıqlarını əlavə edirik və nəticədə buna bənzər işarələmə əldə edirik:
Veb inkişaf blogu
Qeyri-adi yerləşdirmə planı: metodologiya və xüsusiyyətlər
Budur Yandex abstraktlarından mətn ...
Şəkillərlə daha bir neçə mətn
İlk başlıq
Eyni zamanda, brendin qurulması əvvəlki media kampaniyalarının nəticəsini nəzərə alaraq sublimasiya edilmiş sorğunu sadələşdirir.
İkinci başlıq
Maslow piramidasının strukturuna əsaslanaraq, satış liderliyi bazar payını qazanaraq qavrayış prinsipini sadələşdirir.
Üçüncü başlıq
Yaşayış standartlarının yüksəldilməsi, yuxarıda göstərilənlərdən asılı olmayaraq, xərclərdən asılı olmayaraq, imic formalaşmasını inkişaf etdirir.
6-cı sətirə diqqət yetirin. Fakt budur ki, mobil qurğular veb səhifələri asan baxmaq üçün miqyaslandırır, lakin buna ehtiyacımız yoxdur. Bu meta girişi ilə biz səhifə miqyasını aradan qaldırırıq.
İndi keçək CSS üslubuna. Sol bloku düzəldək:
Sol_yan(fon: #1d282b; en: 300px; mövqe: sabit; sol: 0; yuxarı: 0; hündürlük: 100%; z-indeksi: 5; ) .logo_text( dolgu: 20px 10px; rəng:#ffffff; şrift- ölçüsü: 24px; sətir hündürlüyü: 30px; şrift çəkisi: normal; şrift ailəsi: myPTNarrow; mətni align: mərkəzə; ) .logo_text a( display: inline-block; ) .logo_text span( color:#72898f; font -ölçüsü: 18px; sətir hündürlüyü: 24px; doldurma: 0 10px 18px; mətn hizalanması: mərkəzə; displey: blok; ) .left_menu( kənar-yuxarı: 30px; ) .left_menu ul( ekran: blok; siyahı üslubu- type: none; ) .left_menu li( displey: blok; hündürlük: 30px; xətt hündürlüyü: 30px; ) .left_menu li a( ekran: blok; sətir hündürlüyü: 30px; şrift ölçüsü: 18px; şrift ailəsi: myPTNarrow ; color:#ffffff; mətn dekorasiyası: heç biri; padding-left: 60px; ) .left_menu li a:hover( fon: #343e41; ) .social_img( text-align: center; ) .social_img a( display: inline- blok; kənar: 0 10px; en: 30px; hündürlük: 30px; daşqın: gizli; ) .social_img a:hover( qeyri-şəffaflıq: 0.7; ) .tw_icon( fon: url("../images/social.png") yuxarı heç bir təkrar buraxma; ) .go_icon( fon: url("../images/social.png") yuxarı sağda təkrar yoxdur; ) .left_swap( displey: heç biri;/* Blok defolt olaraq görünmür, media sorğusu işə salındıqda göstərilir * / mövqe: sabit; en: 50px; sol: 0; yuxarı: 0; hündürlük: 100%; z-indeksi: 6; fon: url(../images/swipe.png) #1d282b mərkəz 20px təkrarlama; )
Burada biz .left_side konteynerini mövqeyə təyin etdik: sabit. Bu xüsusiyyət blokun həmişə solda qalmasına imkan verəcək (sola: 0; yuxarı: 0; və hündürlük: 100%;) və əsas məzmunla sürüşməməyə. Blokun heç bir şeylə üst-üstə düşməməsini təmin etmək üçün z-indeksini əlavə edin: 5.
Sol blokun eni 300px olduğundan, sol menyunun altına "düşməmək" üçün mərkəzi blokda (.wrapper) sol kənardan daxili dolgu - padding-left: 300px olmalıdır.
Mərkəzi bölmənin ümumi kodu:
Sarmalayıcı (mövqe: nisbi; fon: #ffffff; minimum hündürlük: 200%; min-en: 400px; maksimum en: 1200px; doldurma-sol: 300px; padding-sağ: 0px; qutu-kölgə: 0 0 10px rgba (0,0,0,0.2); ) .wrapper a( color:#576a6f; ) .wrapper a:hover( color:#1d282b; ) .text_block( overflow: hidden; color:#4a4a4a; font ölçüsü: 18px ; xətt hündürlüyü: 24px; minimum hündürlük: 200px; fon: url("../images/hr.png") sol alt təkrar-x; doldurma: 10px 40px 10px; ) p( kənar-alt: 24px; ) .cent_img( ekran: blok; kənar: 0 avtomatik 40px; ) .auto_img( ekran: blok; maksimum en: 100%; kənar: 0 avtomatik 24px; )
Burada ən vacib şey bu blokun eninin dizaynıdır. .wrapper üçün xassələri göstərin
Minimum eni: 480px maksimum eni: 1200px
Yəni, ekran eni artırıldıqda, blok məzmunla birlikdə 1200 pikselə qədər genişlənəcək, sonra sol tərəfdə qalacaq, sağda isə sadəcə fon olacaq. Kiçildildikdə 400px-ə qədər kiçiləcək, daha güclüdürsə, üfüqi sürüşmə görünəcək.
Mərkəz blokun içərisində olan şəkillər .auto_img sinfinə malik olmalıdır. Əgər onlar genişliyə uyğun gəlmirsə, onda onlar mütənasib şəkildə daralacaqlar və konteynerin eninin 100% -ə bərabər olacaqlar.
Sonra CSS media sorğularına baxaq. Bütün bu cür sorğular belə görünür. Əvvəlcə @media başlığı gəlir, sonra bu sorğu üçün css kodunu tətbiq etmək istədiyiniz cihazın növü göstərilir. Normal rəngli ekran üçün bu ekran sözüdür (ya da daha tez-tez hamısını yazır, yəni bütün cihazlar üçün). Sonra mötərizədə şərtlər və parametrlər göstərilir.
İndi bizi max-cihaz genişliyi şərti maraqlandırır, bu şərtlə aşağıdakı qaydaların yalnız brauzerin maksimum eni iki nöqtədən sonra müəyyən edilmiş müəyyən dəyərdən az olduqda rejim üçün tətbiq ediləcəyini bildirir.
Yəni şərtlərimizdən biri belə görünəcək:
@media ekranı və (maksimum en:800px)( .left_side( displey: heç biri; ) .left_swap( displey: blok; ) .wrapper( padding-left: 50px; ) )
Buruq mötərizələrdə biz artıq lazımi CSS qaydalarını qoymuşuq, yəni sol menyunu gizlədirik və əvvəllər gizlənmiş köməkçi dar sol bloku - .left_swap göstəririk.
Aşağı üfüqi blokları şaquli sıraya köçürmək üçün daha bir şərt əlavə edək.
@media ekranı və (maksimum en:720px)( .footer_block( displey: blok; en: 96%; ) )
Bunlar. elementlər sıralı olmağı dayandırır və bloka çevrilir, buna görə də bir-birinin ardınca düzülür. Mülk genişliyi ilə: 96%, biz onların enini maksimuma qədər artırırıq (100% -ə qədər deyil, çünki biz paddingləri - daxili kənarları saxlayırıq).
Burada mən HD planşetlərin və smartfonların portretdə adətən 800 piksel olması faktına əsaslanıram, ona görə də aşağıda göstərilən hər hansı bir şey üçün menyu bloku gizlidir.
Əslində, CSS media sorğuları və operatorlarından istifadə edərək birdən çox şərt əlavə etməklə daha mürəkkəb edilə bilər. Siz yalnız ekranın enini deyil, həm də hündürlüyünü, oriyentasiyasını, dəstəklənən rənglərin sayını və digər parametrləri təyin edə bilərsiniz.
Nəhayət, .left_swap-da dar sol blokun üzərinə klikləməklə sol menyunu açmaq üçün jQuery-dən istifadə edək. Məsələn, bu kimi:
jQuery(funksiya($) ( $(".sol_dəyişdirmə").klik(funksiya ()( $(".sol_yan").toggle(); false qaytarmaq; )); ))
Burada hər şey son dərəcə sadədir, biz bloka bir kliklə emal edirik və menyu ilə bloku göstərir və ya gizlədirik. Kod yəqin ki, çox sadədir və təkmilləşdirilə bilər, lakin nümunə olaraq bunu edəcək.
Beləliklə, biz adaptiv saytın tərtibatının bir nümunəsini nəzərdən keçirdik və nəticəni demo səhifəsində həmişəki kimi görmək olar. Brauzer pəncərəsinin enini artırmağa və ya azaltmağa çalışın və blokların necə davrandığını müşahidə edin.
PS: Son vaxtlar bloqdakı şərhlərdə çoxlu spam var, onu təmizləməyə həmişə vaxtım olmur, amma yenə də işlə bağlı bütün şərhlərinizi oxuyuram və cavab verməyə çalışacağam.
Həssas veb saytın nə olduğu ilə bağlı iki əsas yanlış fikir var. Bəzi insanlar bunun sadəcə elementlərin sıxıldığı saytın azaldılmış görüntüsü olduğunu düşünür. Digərləri cavab verən dizaynı saytın mobil versiyası ilə eyniləşdirməkdə israr edirlər. Bu yazıda biz i nöqtəsini qoyacağıq və bunun həqiqətən necə olduğunu sizə xəbər verəcəyik.
Adaptiv layout nədir
Cavab verən, elementlərin müxtəlif ekran qətnamələrinə dinamik şəkildə uyğunlaşması səbəbindən saytın müxtəlif cihazlarda düzgün şəkildə göstərildiyi belə bir tərtibatdır.
Sadəcə olaraq, cavabdehlik saytın daha kiçik bir versiyası deyil, blokların dinamik yığılmasıdır.
İstifadəçinin sayta hansı cihazdan daxil olmasının əhəmiyyəti yoxdur: kompüterdən, planşetdən və ya telefondan - ondan istifadə etmək eyni dərəcədə rahat olacaq və lazımi funksionallıq tam olaraq qorunacaqdır.
Niyə adaptiv tərtibata ehtiyacınız var
Bu gün insanların planşet və mobil telefonlardan internetə nə qədər tez-tez daxil olduğunu sübut etmək üçün araşdırmalar və statistika axtarmaq lazım deyil. Bu reallıq bizi hər yerdə əhatə edir: ictimai nəqliyyatda, kafelərdə, növbələrdə - insanlar həvəslə vaxtlarını internetdə gəzməklə doldururlar və bunun nə qədər rahat olduğunu özünüz də bilirsiniz. Pizza seçmək və sifariş etmək üçün heç kim kompüterin başına keçmək üçün əvvəlcə evə getməyəcək, ancaq yol boyu başqa işlərlə məşğul olaraq telefondan tez sayta gedəcək. Satınalma ideyası ortaya çıxanda ən asan yol dərhal internetə girmək, rəqib mağazaların təkliflərini müqayisə etmək və gecikmədən mallar üçün sifariş verməkdir. Və belə misallar saysız-hesabsızdır!
Cavablılıq müasir veb-sayt üçün vacib və əvəzedilməz şərtlərdən biridir.
Sayt yalnız kompüterdən düzgün göstərilirsə, planşetdən və ya telefondan baxarkən naviqasiya çətinləşir, bloklar ölçülənmir, istədiyiniz linki barmağınızla vurmaq çətindir - nəticədə istifadəçi əsəbiləşir, hədəf hərəkəti yerinə yetirə bilmir, əyri ekranı anlamağa çalışaraq vaxt itirir və resursdan çıxır. Və sonra ona qayıtmır. Və rəqiblərə gedir.
Buna görə də adaptiv veb sayt sifariş etmək qərarı şıltaqlıq deyil, birbaşa satış səviyyəsinə təsir edən bir şərtdir.
Cavab verən veb sayt necə işləyir
Cavab verməyən saytı tanımaq asandır - planşetdən və ya telefondan baxanda siz ərazinin yalnız bir hissəsini görəcəksiniz, görünən sahəni sola və sağa köçürməli, şrifti oxunaqlı etmək üçün böyütməli və kiçiltməli olacaqsınız. istədiyiniz bölməni və ya ərizə formasını tapmaq üçün.
Cavab verən veb-sayt ekranının enindən asılı olaraq cihaza uyğunlaşır. Səhifədəki bütün elementlər uyğunlaşır: ölçüləri dəyişir, bəzi köməkçi məzmun və dekorativ elementlər görünür/yox olur. Eyni zamanda, bloklar istifadəçi üçün rahat olacaq şəkildə yenidən qurulur - əhəmiyyətli məlumatlara diqqət yetirilir və ikincil məlumatlar silinir və ya çökdürülür.
Bir qayda olaraq, ekranın eni nə qədər kiçik olarsa, məlumatın təqdimatı bir o qədər cəmləşir və daha az blok iştirak edir. Eyni zamanda, istifadəçinin miqyasını dəyişdirməsinə ehtiyac yoxdur: kiçik ekranda belə hər şey sadə və başa düşüləndir.
Cavab verən saytların başqa bir xüsusiyyəti istifadəçinin barmağı ilə ekrandakı düyməni asanlıqla vurması və ya keçidi izləməsi üçün əhəmiyyətli elementlərin böyüdülməsidir. Saytın çevrilməsi birbaşa bundan asılıdır, ona görə də adaptiv dizaynı istifadəçi dostu etmək vacibdir.
Cavab verən veb saytlar haqqında bilmək üçün vacib faktlar
1. Cavab verən vebsayt və mobil versiya eyni deyil.
Cavab verən sayt haqqında danışarkən, bunun müxtəlif cihazlar üçün bir sayt olduğunu nəzərdə tuturuq. Bu, onun saytın mobil versiyasından əsas fərqidir. Mobil versiya öz funksionallığı, öz tərtibatı və çox vaxt öz məzmununa malik olan ayrıca tam hüquqlu saytdır. Mobil versiya sayta mobil cihazlardan daxil olan istifadəçilərin rahatlığı nəzərə alınmaqla hazırlanmışdır: masaüstü versiyadan onlar üçün çox vacib olan və lazımsız olan və asanlıqla çıxarıla bilən.
2. Bütün cihazlarda funksionallıq eynidir.
Burada hər şey aydındır: sayt bir olduğundan istifadəçilərin sayta hansı cihazdan daxil olmasından asılı olmayaraq onun imkanları eynidir.
3. Cavab verən dizayn məhdudiyyətlərə malikdir.
Onlar ilk növbədə ekran ölçüsü dəyişdikdə orijinal məzmun strukturunun qorunması ilə bağlıdır. Tez-tez, cavab verən versiyada, masa üstü versiyasında olan və Flash istifadə etməyən kaydırıcıyı və böyük fon şəkillərini tərk edirik. Biz adətən ən yaxşı variantı tövsiyə edirik.
Amma elə olur ki, dizayn müştərinin təkid etdiyi versiyada razılaşdırılır və hazır tərtibat əlverişsiz olur. Sonra bütün dəyişikliklər əlavə ödəniş üçün edilir, çünki biz ciddi şəkildə TOR-a uyğun işləyirik.
4. Uyğunlaşma tam və ya qismən ola bilər..
Tam uyğunlaşma - mobil cihazlardan masaüstü kompüterlərə, qismən - məsələn, planşetdən və ya noutbukdan masaüstünə. Cavab verən dizayn hazırlayarkən diqqət adətən müştərinin ən çox trafik yaratdığı xüsusi cihazlara yönəldilir.
5. Bütün veb-saytlar tam cavab verən dizayndan faydalanmır.
Qavrama üçün kifayət qədər ekran sahəsi tələb edən mürəkkəb funksionallıq və/yaxud məzmunu olan saytların tam cavab verməyə zərər vermə ehtimalı daha yüksəkdir. Funksiyasının tam olacağı cihazların siyahısını seçmək və onlar üçün qismən uyğunlaşa bilən bir versiya hazırlamaq, qalanları üçün azaldılmış funksionallıq və tam ekran versiyasına keçmək imkanı olan bir mobil versiya hazırlamaq daha yaxşıdır. .
6. Brauzerlər arası uyğunluq müxtəlif brauzerlərdə ekranın şəxsiyyətinə cavabdehdir.
Saytın müxtəlif brauzerlərdə eyni şəkildə göstərilməsi sizin üçün vacibdirsə, bu elementi TOR-da göstərdiyinizə əmin olun. Əks halda, brauzerlərin köhnə versiyalarında sayt səhvlərlə göstərilə və oxunmayan şriftlər yarada bilər. Və bu, hədəf auditoriyasını itirməyə aparan birbaşa yoldur.
Adaptiv layout sifariş etmək istəyirsinizsə, nəyi bilməlisiniz
"Uğur Texnologiyaları" şirkəti saytın adaptiv tərtibatının yaradılması üzrə xidmətlər göstərir. Əsas saytın inkişafı mərhələsində adaptiv dizaynı təmin etmək və onu TOR-da yazmaq daha yaxşıdır. Amma bizə .psd formatında hazır dizaynla gəlsəniz, biz də sizə kömək edə bilərik. Biz CorelDraw-da hazırlanmış planların tərtibatını öz öhdəmizə götürmürük - bu halda biz müştərilərimizə əvvəlcə dizaynı, sonra isə tərtibatı hazırlamağı təklif edirik.
Saytın xüsusiyyətlərini və texniki xüsusiyyətləri bilmədən, layout baxımından istiqamətləndirmək mümkün deyil.
Tipik olaraq, adaptiv korporativ veb-saytın tərtibatı orta hesabla 15 gün çəkir, adaptiv onlayn mağazanın tərtibatı üçün müddət birbaşa saytın mürəkkəbliyindən asılıdır.
Müştəri saytın uyğunlaşmasını və onun bütün elementlərinin TOR-a uyğun düzgün işləməsini yoxlayana qədər biz heç vaxt tərtibatı növbəti mərhələyə - proqramlaşdırmaya keçirmirik.
Suallar qaldı: yoxsa mobil versiya? Pulsuz 8 800 775-17-11 nömrəsinə zəng edin və ya nömrənizi buraxın, biz sizə zəng edib hər şeyi deyəcəyik.
Hamıya salam!
Mənim üçün adaptiv layout prinsipi ortaya çıxanda, bu, hələ də sağalmadığım bir kabus oldu, bu, belə bir ağrıdır - axırda, hər bir qətnamə üçün praktiki olaraq planı çevirməli, yeni kod yazmalısınız, saxlanması daha çətin olan bir çox kod ortaya çıxır. Bu ağrını "kod entropiyası" adı altında anlayacağıq.
Bu yaxınlarda mənə bir mobil tətbiqin tərtibatı verildi və mən nəhayət bu ağrıları aradan qaldırmağa, onu gözəl və qısa etməyə çalışmaq qərarına gəldim - rem istifadə edin. Bu mənə ən sadə həll kimi görünürdü, mobil brauzerlərin 100%-i bu bölməni dəstəkləyir. Nəticə ondan ibarətdir ki, biz html teqi üçün bir neçə sətir media sorğusu yazırıq, bu, yalnız əsas şrift ölçülərini piksellərlə göstərərək, tərtibatımızın müxtəlif qətnamələrdə necə görünməsi lazım olduğuna mütənasibdir və biz tərtibatın qalan hissəsini media sorğuları olmadan aşağıdakı kimi yazırıq: adi, yalnız piksel əvəzinə rem istifadə edirik. Bu texnika əsas şrift ölçüsündən asılı olaraq düzümü asanlıqla miqyaslandırır və tənzimləyir.
Kodun minimuma endirilməsi və bu şəkildə uyğunlaşmanın asanlığı sadəcə böyükdür!
Bu metodun yeganə dezavantajı var idi: psd tərtibatının piksellərini daim rem-ə yenidən hesablamaq lazım idi, lakin mən bu problemi tez həll etdim - piksellərdə əvvəlki kimi xüsusi bir funksiya və yazı yazısı yazdım, preprosessor özü rem-ə çevrildi.
Amma! Əsas zarafat odur ki, mən bu texnikadan istifadə edərək adaptiv mobil proqram yaratdım, burada dizayn eyni idi.
Mən adaptivliyə qayıdanda müntəzəm saytlar üçün ağrı mənə qayıtdı əvvəlkindən daha çox gücləçünki bir qayda olaraq 3-dən 6-ya qədər müxtəlif dizaynlarımız var:
1) Böyük iş masası 1600-1920 piksel
2) Kiçik masa üstü/laptop ~1100-1400 piksel
3) Old Monique / Planşet - 768-1024 piksel
4) Planşetdən aşağı / böyük ölçülü smartfon ~ 600 piksel
5) Smartfon 300-480
6) Köhnə smartfon 250 piksel.
Əlbəttə ki, şişirtmişəm, amma əmin olmaq üçün ən azı üç layout etmək lazımdır.
Beləliklə, 1 nömrəli və ən vacib sual budur: adaptiv tərtibatı necə minimuma endirmək və kodu gözəl etmək olar? Sözdə azaltmaq üçün necə. kod entropiyası? Hər hansı sərin yanaşma/metod varmı?
Cavab tapmaq üçün sərin veb-studiyaların müxtəlif saytlarına baxdım və gördüm ki, hamı təsadüfi yazır, yəni ümumiyyətlə. narahat etmədən.
Gördüyüm yeganə şey odur ki, bəzi insanlar nədənsə adi piksellər əvəzinə şriftlər üçün em və faizlərdən istifadə edirlər. Mətnin miqyasını genişləndirmək kimi görünür, bunun uyğunlaşma kodunu necə azaldacağı bəlli olmasa da, mənim fikrimcə, bu, yalnız hər şeyi çətinləşdirir - ana blokun şrift ölçüsündən asılı olaraq hesablamalar aparmalısınız və hətta preprosessorlar çox güman ki, etməyəcəklər. kömək ... Bilmirəm niyə şrift ölçülərini em vahidlərinə təyin etmək üçün buxar banyosuna getməlisən , rem ilə bağlı problemlər hələ də heç bir yerə getmədi... Bəlkə də mən pis tərtibatçıyam... Bu saytların ən inadkarları marja və digər qutu ölçülü xüsusiyyətlər üçün em istifadə edirdi...
Sual №2:
Ondan istifadə etməyin mənası nədir?
Və dərhal 3 nömrəli sual:
Doğrudanmı heç bir vahid metodologiya yoxdur, düzənlik o qədər pisdir ki, hər kəs bunu istədiyi kimi etmək istəyir və .... aldadır? Yoxsa pis nümunələr görmüşəm (baxmayaraq ki, ən yaxşı themeforest mövzuları və ən yaxşı veb studiya saytları arasında axtarış aparmışam)?
