Media Queries trong LESS

Hãy tạo một hàm sẽ thêm media query vào phần tử. Lấy ví dụ đây là một truy vấn điều chỉnh kiểu cho thiết bị di động. Hãy đặt tên cho hàm của chúng ta một cách phù hợp:

.mobile(@code) {

}

Hàm của chúng ta sẽ nhận một khối mã làm tham số. Hãy xuất khối này bên trong media query:

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

Bây giờ hãy sử dụng hàm của chúng ta:

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

Kết quả là sau khi biên dịch, thẻ div của chúng ta sẽ nằm bên trong media query, nhận được các kiểu tương ứng:

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

Tạo hàm tablet, thiết lập kiểu cho máy tính bảng.

Tạo hàm gadget, thiết lập kiểu cho điện thoại di động và máy tính bảng.

Tạo hàm notebook, thiết lập kiểu cho máy tính xách tay.

Tạo hàm desktop, thiết lập kiểu cho máy tính để bàn.