2.1 Media sorğularının əsasları
Media sorğuları (media queries), reaksiya verən veb saytlarının yaradılması üçün əsas alətlərdən biridir. Onların köməyi ilə müxtəlif cihazlar və ekran ölçülərinə uyğun stillər tənzimlənir, optimal görünüş və rahat istifadə təmin edilir. Aşağıda media sorğularının istifadəsinin əsaslarını, onların sintaksisini və fərqli ekranlar üçün stillərin uyğunlaşdırılması nümunələrini nəzərdən keçirəcəyik.
Media sorğuları @media qaydasından istifadə edir və bu qayda müəyyən şərtlər yerinə yetirildikdə xüsusi stillərin tətbiq edilməsinə imkan verir. Şərtlər ekran ölçüləri, çözünürlük, orientasiya və digər parametrləri əhatə edə bilər.
Sintaksis:
@media media-type and (media-feature) {
/* stillər */
}
Burada:
media-type: stillərin tətbiq olunacağı media növü. Ən çox istifadə olunan screen-dirmedia-feature: media xüsusiyyətləri, məsələn, en, hündürlük, orientasiya və s.
Nümunə:
- Bu nümunədə, əgər ekranın eni 768 pikselə çatmırsa, səhifənin fonu açıq mavi olacaq.
@media screen and (max-width: 768px) {
body {
background-color: lightblue;
}
}
2.2 Media-sorğuların növləri
1. En və hündürlük üzrə sorğular
Bu media-sorğular stiləri baxış pəncərəsinin eninə və hündürlüyünə görə dəyişməyə imkan verir.
Nümunələr:
/* Ekran eni 768px və ya daha azdırsa stil tətbiq edin */
@media (max-width: 768px) {
.container {
padding: 10px;
}
}
/* Ekran hündürlüyü 800px-dən çoxdursa stil tətbiq edin */
@media (min-height: 800px) {
.header {
height: 150px;
}
}
2. Orientasiya (orientation)
Ekranın orientasiyası üzrə sorğular cihazın portret (portrait) və ya mənzərə (landscape) rejimində olub-olmamasına görə stiləri uyğunlaşdırmağa imkan verir.
Nümunələr:
/* Portret orientasiyası üçün stil tətbiq edin */
@media (orientation: portrait) {
.sidebar {
display: none;
}
}
/* Mənzərə orientasiyası üçün stil tətbiq edin */
@media (orientation: landscape) {
.sidebar {
display: block;
}
}
3. Piksel sıxlığı (resolution)
Pixel sıxlığı üzrə media-sorğular Retina kimi müxtəlif piksel sıxlığı olan cihazlar üçün stiləri uyğunlaşdırmağa imkan verir.
Nümunələr:
/* Piksel sıxlığı 2x və daha yüksək olan ekranlar üçün stil tətbiq edin */
@media (min-resolution: 2dppx) {
.high-res-image {
background-image: url('high-res-image.png');
}
}
/* Piksel sıxlığı 2x-dən az olan ekranlar üçün stil tətbiq edin */
@media (max-resolution: 1.99dppx) {
.high-res-image {
background-image: url('standard-res-image.png');
}
}
2.3 Media sorğularının kombinasiyası
Media sorğuları and, not və only məntiqi operatorları ilə birləşdirilə bilər.
Nümunələr
And operatorunun istifadəsi:
/* Ekran genişliyi 600px ilə 1200px arası olan cihazlar üçün stilləri tətbiq edin */
@media (min-width: 600px) and (max-width: 1200px) {
.main-content {
margin: 0 auto;
width: 80%;
}
}
Not operatorunun istifadəsi:
/* Ekran genişliyi 600px-dən az olan cihazlar istisna olmaqla, bütün cihazlar üçün stilləri tətbiq edin */
@media not all and (max-width: 600px) {
.footer {
display: block;
}
}
Only operatorunun istifadəsi:
/* Yalnız ekranlar üçün stilləri tətbiq edin */
@media only screen and (max-width: 768px) {
.menu {
display: none;
}
}
GO TO FULL VERSION