今回は、上級者向けレスポンシブデザインの書き方です。 ちょっとマニアックですが、分かる人にはこの記事の重要さが分かるはず。 「メディアクエリに頼らずに、いかにスマホ・タブレット・パソコンとの差異を失くせるか?」 ここにポイントを当てています。 メインCSSだけ書き換えれば、全てのデバイスに連動するので、複雑なデザインの修正でも、メンテナンスが非常に楽になります。 1.画像サイズの単位は「vmax」を使用する レスポンシブデザインにおいて、画像サイズを指定する単位には、「%」や「vw」を用いるのが一般的です。 ところが、パソコンでみたときに比べ、スマホで見たときには、思いのほか画像が小さく表示されてしまいます。 よって、多くの場合、画像サイズはメディアクエリを用いて、別々に画像サイズを指定し直しているはずです。 そこで、使用するのが「vmax」です。 vmaxは、高さと幅のどちらか値が大きな
![レスポンシブデザインで重要なCSSの書き方(上級者向け)](https://cdn-ak-scissors.b.st-hatena.com/image/square/6ca2daf307ea9756c4597fcd89f90e4c591f820c/height=288;version=1;width=512/https%3A%2F%2Fwww.ore-server.com%2Fblog%2Fwp-content%2Fuploads%2F2021%2F01%2F202010102a-150x150.jpg)