Minimum eni və maksimum genişlikdə olan media sorgulamaları üçün sintaksis
Həssas web dizaynı , bu səhifələrin dinamik şəkildə qonaqların ekran ölçüsünə əsaslanaraq düzəldilməsi və görünüşünü dəyişə biləcəyi veb səhifələrin yaradılması üçün bir yanaşmadır. Böyük ekranlar daha kiçik ekranlara uyğun bir düzəltmə ala bilər, belə ki, kiçik telefonlar, mobil telefonlar kimi, həmin kiçik ekrana uyğun şəkildə formatlanmış eyni veb səhifəni ala bilərlər. Bu yanaşma bütün istifadəçilər üçün daha yaxşı bir istifadəçi təcrübəsi təmin edir və hətta axtarış sisteminin reytinqini yaxşılaşdırmağa kömək edə bilər. Həssas veb dizaynın mühüm hissəsi CSS Media Sorğularıdır.
Mediya Sorguları, müəyyən bir şərt yerinə yetirildikdən sonra təsir göstərəcək müəyyən CSS qaydaları təyin etmək üçün imkan verən veb səhifənin CSS faylı daxilində az şərtli ifadələrdir. Ekran ölçüsü müəyyən həddən artıq və ya aşağıda olduqda.
Fəaliyyətdə Media Sorğuları
Beləliklə, veb saytında Media Sorgularını necə istifadə edirsiniz? Burada çox sadə bir nümunə var:
- Hər hansı bir vizual üslubdan xeyli strukturlaşdırılmış HTML sənədləri ilə başlayacaqsınız (CSS üçün nədir)
- CSS dosyanızda, normal olaraq səhifənin görünüşü və veb saytın necə görünməsi üçün bir əsas müəyyən edilməsi ilə başlayın. Sayfanın şrift ölçüsünün 16 piksel olmasını istediğinizi söyleyin, bu CSS yaza bilərsiniz: body {font-size: 16px; }
- İndi, daha geniş mülkiyyətə malik olan böyük ekranlar üçün o font ölçüsünü artırmaq istəyə bilərsiniz. Media Sorgulamaları burada baş verir. Bu kimi bir Media Query başlamış olursunuz: @media ekranı və (min-width: 1000px) {}
- Bu, Media Query sintaksisidir. Media Query özünü yaratmaq üçün @ media ilə başlayır. Sonra bu halda "ekran" olan "media növü" ni qurdunuz. Bu, masa üstü kompüter ekranlarına, tabletlərə, telefonlara və s. Üçün də aiddir. Nəhayət, Media Sorgusunu "media xüsusiyyətləri" ilə bitirirsiniz. Yuxarıdakı nümunədə, "orta en: 1000px" dir. Bunun anlamı, Media Query'in 1000 piksel genişlikteki en az genişlikte görüntüler üçün tekmeleyeceği anlamına gelir.
- Media Query-in bu elementlərindən sonra, hər hansı bir normal CSS qaydasında nə edəcəyinizə bənzər bir açılış və qıvrımlı bağ əlavə edərsiniz.
- Media Query üçün son addım bu şərt yerinə yetirdikdən sonra tətbiq etmək istədiyiniz CSS qaydalarına əlavə etməkdir. Media Sorgusunu təşkil edən curly braces arasında bu CSS qaydalarına əlavə olunur: @media ekranı və (minimum genişlik: 1000px) {body (font-size: 20px; }
- Media Sorgusunun şərtləri yerinə yetirildikdə (brauzer pəncərəsi ən azı 1000 piksel genişliyində) bu CSS tərzi bizim saytın şrift ölçüsünü ilk olaraq qurduğumuz 16 pikseldən 20 piksel dəyərinə dəyişir.
Daha çox stil əlavə edilməsi
Veb saytınızın vizual görünüşünü tənzimləmək üçün lazım olan bu Media Sorgusu daxilində bir çox CSS qaydaları yerləşdirə bilərsiniz. Məsələn, font ölçüsünü yalnız 20 pikselə artırmaq üçün deyil, həm də bütün paraqrafların rəngini qara rəngə (# 000000) dəyişmək istəyirsən, bu əlavə edə bilərsiniz:
@media ekranı və (eni: 1000px) {body (font-size: 20px; } p {color: # 000000; }}Daha çox media sorgularını əlavə et
Əlavə olaraq, hər bir daha böyük ölçüdə daha çox Media Sorguları əlavə edə bilərsiniz, bunları stilinizə əlavə edin:
@media ekranı və (eni: 1000px) {body (font-size: 20px; } p {color: # 000000; {} @media ekranı və (min-en: 1400px) {body (font-size: 24px; }}İlk Media Sorguları, 1000 piksel genişlikte, şrift boyutunu 20 piksele değiştirecek. Sonra brauzer 1400 pikseldən yuxarı qaldıqdan sonra, font ölçüsü yenidən 24 pikselə dəyişəcəkdi. Xüsusi veb saytınız üçün lazım olduğu qədər çox Media Sorğuları əlavə edə bilərsiniz.
Min-eni və Max-eni
Ümumiyyətlə Media Sorgularını yazmaq üçün iki yol var - "min-width" və ya "max-width" ilə. Bu günə qədər hərəkətdə "min genişlik" gördük. Bu brauzer ən azı minimum genişliyə çatdıqdan sonra Media Sorgulamalarının təsirinə səbəb olur. Beləliklə, "min-width: 1000px" istifadə edən bir sorğu brauzer ən azı 1000 piksel genişliyində tətbiq olunacaq. Bir Media Sorgu stili, "mobil ilk" bir şəkildə bir site qurarkən istifadə olunur.
"Max-width" istifadə etsəniz, əks istiqamətdə işləyir. Brauzer bu ölçünün altına düşdükdən sonra "maksimum genişlik: 1000px" bir media sorgusu tətbiq ediləcək.
Daha Köhnə Tarayıcılarla əlaqədar
Media Sorguları ilə bir problem Internet Explorer-də köhnə versiyalarda dəstək olmamasıdır. Şükürlər olsun ki, bu köhnə brauzerlərdə Media Sorgularına dəstək verə biləcək, mövcud saytların bu səhifənin görünüşünü köhnə brauzer proqramlarında pozulmadığını təmin edərkən bu gün saytlarda istifadə etməyə imkan verən polifillər mövcuddur .
Jeremy Girard tərəfindən 1/24/17 tarixində ediləcək