Sassの@mixinでレスポンシブ対応(Sass記法)

自力でレスポンシブ対応しようぜ!

レスポンシブ対応とは

一応説明するとWebページのデザインが画面サイズに合わせて変化するようにすることです。

少なくともPCサイズとスマフォサイズは用意したいところ

どうやるのか

CSSでmediaQueryという仕組みを使って画面サイズごとのデザインを指定します。

こんな感じ

こんな感じに書くと400px以上とそれ以下の時で見た目を分けることができます。便利。

SassでクールにMediaQueryを使うには?

Sassのmixinという機能を使うとちょっとクール。

mixinに関してはググってください。そのうちちゃんとやりたいね。

で、どうなるかというとこんな感じ。

こんな感じで各クラスごと、画面サイズごとに簡単に指定することができるわけです。
クールですね。

クラスの中で画面サイズ指定するんじゃなくて画面サイズごとにクラス指定する書き方も考えられますがどっちがメジャーなんですかね?

まあ前者(今回の書き方)のほうが読みやすいと個人的には思うのでとりあえずこのままやってみようと思います。

いやーそれにしてもSass、便利ですね。

ではまた。

にほんブログ村 IT技術ブログへ
おすすめ

Udemyのビデオ講座は本当に捗るので学習にとてもおすすめです。まじで。


スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です