LESS ရှိ Media Queries များ

ဒြပ်စင်တစ်ခုသို့ media query ထည့်ပေးမယ့် function တစ်ခုလုပ်ကြည့်ရအောင်။ ဥပမာအနေနဲ့ မိုဘိုင်းကိရိယာများအတွက် style များကို ထိန်းညှိပေးသော query တစ်ခုဖြစ်ပါစေ။ ကျွန်ုပ်တို့၏ function ကို သင့်လျော်စွာ နာမည်ပေးကြပါစို့ -

.mobile(@code) {

}

ကျွန်ုပ်တို့၏ function သည် parameter အဖြစ် code block တစ်ခုကို လက်ခံပါလိမ့်မည်။ ထို code block ကို media query အတွင်းမှာ �ုတ်ကြည့်ရအောင် -

.mobile(@code) {
	@media (max-width: 600px) {
		@code();
	}
}

ယခု ကျွန်ုပ်တို့၏ function ကို အသုံးပြုကြပါစို့ -

div {
	.mobile({
		width: 300px;
	});
}

ရလဒ်အနေနဲ့ compilation ပြီးနောက် ကျွန်ုပ်တို့၏ div သည် media query အတွင်းသို့ ရောက်သွားပြီး သက်ဆိုင်ရာ style များကို ရရှိသွားပါမည် -

@media (max-width: 600px) {
	div {
		width: 300px;
	}
}

တက်ဘလက်များအတွက် style များကို သတ်မှတ်ပေးသော tablet function တစ်ခုကို လုပ်ပါ။

မိုဘိုင်းဖုန်းများနှင့် တက်ဘလက်များအတွက် style များကို သတ်မှတ်ပေးသော gadget function တစ်ခုကို လုပ်ပါ။

နောက်တော့များအတွက် style များကို သတ်မှတ်ပေးသော notebook function တစ်ခုကို လုပ်ပါ။

ဒက်စ်တော့များအတွက် style များကို သတ်မှတ်ပေးသော desktop function တစ်ခုကို လုပ်ပါ။