今更ながらless.jsでレスポンシブデザインできるコードをさっくりと書いてみた
おっす。職場でLess.jsをどうにか普及させようとしているたくみんです。
Less.js かわいいよ Less.js
さて、前置きはこのくらいにして Less.js でレスポンシブ対応をさっさとやりましょう。
| 1 | .wrapper { |
| 2 | /* PCのときは幅980px固定 */ |
| 3 | width: 980px; |
| 4 | |
| 5 | /* タブレットの時はタブレット幅全部 */ |
| 6 | @media only screen and (max-width: 768px) { |
| 7 | width: 100%; |
| 8 | } |
| 9 | |
| 10 | /* スマートフォンの時はちょっと小さめに */ |
| 11 | @media only screen and (max-width: 414px) { |
| 12 | width: 90%; |
| 13 | } |
| 14 | } |
入れ子便利ですね。マジ便利なのでよく使ってます。
ですが、まだCSS感が拭えないですね。もっとLess♡Lessしたいです。
なので、上記の Less.js をもう少し改造してみましょう。
| 1 | /* 各幅の値 */ |
| 2 | @mobile_width: 90%; |
| 3 | @tablet_width: 100%; |
| 4 | @default_width: 980px; |
| 5 | |
| 6 | /* media query の設定 */ |
| 7 | @mobile: ~"only screen and (max-width: 414px)"; |
| 8 | @tablet: ~"only screen and (max-width: 768px)"; |
| 9 | |
| 10 | .wrapper { |
| 11 | width: @default_width; |
| 12 | @media @tablet { width: @tablet_width; } |
| 13 | @media @mobile { width: @mobile_width; } |
| 14 | } |
もっとLess♡Lessした結果がこれだよ。
これが私の限界ですので、もっと(・∀・)ｲｲ!!書き方がありましたら
ぜひぜひ下にあるフォームからご連絡ください。
デザイナーさんだと全く読めなくなる場合もあるので、
共同開発する際には、ご注意くださいね。
でわでわ、読んでいただいてありがとうございました。m( )m
