LESS-də Media Sorğuları
Gəlin elementə media sorğusu əlavə edən bir funksiya edək. Nümunə üçün bu, mobil cihazlar üçün stilləri tənzimləyən bir sorğu olsun. Funksiyamızı müvafiq olaraq adlandıraq:
.mobile(@code) {
}
Funksiyamız parametr kimi kod blokunu qəbul edəcək. Gəlin bu bloku media sorğusu daxilində çıxaraq:
.mobile(@code) {
@media (max-width: 600px) {
@code();
}
}
İndi funksiyamızdan istifadə edək:
div {
.mobile({
width: 300px;
});
}
Nəticədə, kompilyasiyadan sonra div-imiz media sorğusu daxilində yerləşəcək və müvafiq stilləri alacaq:
@media (max-width: 600px) {
div {
width: 300px;
}
}
Planetlər üçün stillər təyin edən
tablet funksiyasını edin.
Mobillər və planetlər üçün stillər təyin edən
gadget funksiyasını edin.
Noutbuklar üçün stillər təyin edən
notebook funksiyasını edin.
Dekstoplar üçün stillər təyin edən
desktop funksiyasını edin.
