LESSにおけるメディアクエリ

要素にメディアクエリを追加する関数を作ってみましょう。例として、モバイルデバイス用のスタイルを調整するクエリにします。関数名もそれに応じて付けましょう：

.mobile(@code) {

}

この関数はパラメータとしてコードブロックを受け取ります。このブロックをメディアクエリ内で出力しましょう：

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

では、作成した関数を使ってみましょう：

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

結果、コンパイル後、divはメディアクエリ内に配置され、対応するスタイルを取得します：

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

タブレット用のスタイルを定義する関数tabletを作成してください。

モバイルおよびタブレット用のスタイルを定義する関数gadgetを作成してください。

ノートパソコン用のスタイルを定義する関数notebookを作成してください。

デスクトップ用のスタイルを定義する関数desktopを作成してください。