Media Queries katika LESS
Wacha tutengeneze kitendo ambacho kitaongeza kipengele cha media query. Wacha kwa mfano hii iwe ombi linalodhibiti mitindo kwa vifaa vya rununu. Wacha tuitaje kitendo chetu ipasavyo:
.mobile(@code) {
}
Kitendo chetu kitachukua kizuizi cha msimbo kama kigezo. Wacha tuonyeshe kizuizi hiki ndani ya media query:
.mobile(@code) {
@media (max-width: 600px) {
@code();
}
}
Sasa tutumie kitendo chetu:
div {
.mobile({
width: 300px;
});
}
Kama matokeo baada ya kukusanya, div yetu itakuwamo ndani ya media query, na kupata mitindo inayofanana:
@media (max-width: 600px) {
div {
width: 300px;
}
}
Tengeneza kitendo tablet, chenye kutoa
mitindo kwa kompyuta kibao.
Tengeneza kitendo gadget, chenye kutoa
mitindo kwa rununu na kompyuta kibao.
Tengeneza kitendo notebook, chenye kutoa
mitindo kwa kompyuta ndogo.
Tengeneza kitendo desktop, chenye kutoa
mitindo kwa kompyuta za mezani.
