レスポンシブデザイン

2021/02/16 - レスポンシブデザイン

今更だけどDenasu Webサイトのスマホ対応をやってみた。Denasuサイトは1998年から運営していることになっているので、モダンな作りにするにはいろいろとめんどくさいなあと思ってたけど、いい加減やらないと、って感じ。
やってみると各HTMLにviewport

<meta name="viewport" content="width=device-width,initial-scale=1" />

を付けて、CSSで

@media screen and (max-width: 600px)

の中に小さい画面用のデザインを定義して、細かいところでは画像のmax-widthを100％にしたり、そのくらいでそれっぽくなった。