レスポンシブデザインで重要なCSSの書き方（上級者向け）

今回は、上級者向けレスポンシブデザインの書き方です。 ちょっとマニアックですが、分かる人にはこの記事の重要さが分かるはず。 「メディアクエリに頼らずに、いかにスマホ・タブレット・パソコンとの差異を失くせるか？」 ここにポイントを当てています。 メインCSSだけ書き換えれば、全てのデバイスに連動するので、複雑なデザインの修正でも、メンテナンスが非常に楽になります。 1．画像サイズの単位は「vmax」を使用する レスポンシブデザインにおいて、画像サイズを指定する単位には、「%」や「vw」を用いるのが一般的です。 ところが、パソコンでみたときに比べ、スマホで見たときには、思いのほか画像が小さく表示されてしまいます。 よって、多くの場合、画像サイズはメディアクエリを用いて、別々に画像サイズを指定し直しているはずです。 そこで、使用するのが「vmax」です。 vmaxは、高さと幅のどちらか値が大きな