前回はMedia Queriesの利用方法とその難点、LESSのコンパイラを利用して少しラクする記法をご紹介しました。 今回はさらに掘り下げて、処理をmixinとして作成し、LESSのメリットを最大限活かす方法をご紹介します。 自動化のポイント まず、前回のコードをおさらいしておきましょう。 //LESS body { #foo { background-size: 320px 480px; @media screen and (-webkit-device-pixel-ratio:2){ background-image: url('bg_x2.png'); } @media screen and (-webkit-device-pixel-ratio:1){ background-image: url('bg.png'); } } } @mediaを毎回書くのは大変ですし、ミスタイプを